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

Posted 2023-05-09

【中文标题】仅当所有输入都有效时才执行代码

【英文标题】：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代码？

【参考方案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');
        
    )

【讨论】：

我的解决方案似乎更复杂