仅当所有输入都有效时才执行代码答案

【问题标题】：execute code only if all inputs are valid仅当所有输入都有效时才执行代码
【发布时间】：2020-10-18 14:02:39
【问题描述】：

只有当所有输入都有效时，我才需要执行代码（发送 ajax 表单）。

我现在使用的代码是：

jQuery('.btn-save').on("click", function() {
    var submit = true;

    jQuery(this).closest('tr').find('input:invalid').each(function () {
        jQuery(this).addClass('error');
        submit = false;
    });

    if (submit) {
        jQuery.ajax({ // ... do the job });
    }
});

我想知道是否有更优雅的方法来做到这一点，而不涉及创建 submit 变量。
我尝试在每个循环中使用return，但它从循环返回，而不是从父 onclick 事件返回。

【问题讨论】：

能否提供HTML代码？

标签： javascript jquery validation

【解决方案1】：

在find 之后，您可能不需要each。 jQuery(this).closest('tr').find('input:invalid') 将返回一个 jquery 对象数组。检查长度是否为0。当为0时表示没有input:invalid。然后进行ajax调用。否则你可以直接使用addClass而不用迭代find的结果

jQuery('.btn-save').on("click", function() {
  const errInputs = jQuery(this).closest('tr').find('input:invalid');
  if (errInputs.length === 0) {
    // ajax code here
  } else {
    errInputs.addClass('error');
  }
});

【讨论】：

【解决方案2】：

这对你有用吗？

$('.btn-save').on("click", function() {

    $(this).closest('tr').find('input:invalid').each(function () {
        jQuery(this).addClass('error');
    });

    if ($(this).closest('tr').find('input:invalid').length > 0) {
        jQuery.ajax({ // ... do the job });
    }
});

【讨论】：

别忘了验证我的答案 ;)

【解决方案3】：

使用https://jqueryvalidation.org/ 怎么样？

https://jqueryvalidation.org/files/demo/

它变得像在输入上指定属性并调用 validate() 一样简单：

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

【讨论】：

【解决方案4】：

你也许可以使用 es6 的 Promise 对象

function handle() {
    const promise = new Promise((resolve, reject) => {
                    
        const elements = jQuery(this).closest('tr').find('input:invalid');

        if (elements) {

            elements.each(()=> {
                jQuery(this).addClass('error');
                submit = false;
                resolve(false)
            });

        } else {
            resolve(true)
        }
    });

    promise.then(valid=>{
        if(valid){
            // jQuery.ajax({ // ... do the job });
        } else {
            // alert('error');
        }
    })

}

【讨论】：

我的解决方案似乎更复杂