Question

我有一个很大的形式，里面有很多输入。其中一些输入是强制性的，我需要使用jQuery 1.3.2进行检查。我使用的不是提交按钮而是<input type ="button"> - 我需要使用它，因为我必须在单击按钮时触发ajax调用。

所以代码应该做的是：

检查必填字段是否为正确输入。
如果必填字段不是正确输入图像应该是所示。
如果必填字段正确那么ajax调用可以运行。

正如您可能会看到某些字段被重复，因此代码应该能够在任何重复/重复输入（相同的名称和ID）上工作

    <form action ="">
    <!-- First Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <!-- Second Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <!-- Third Author -->
    Author Name: <input type="text" id="AuthorName" name="authorNAMEinput">
<img src="error.png" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany" name="authorCompanyinput">
<img src="error.png" style="display:none">
    <input type ="button" id="authorbutton" name="authorbuttoninput">
    </form>

现在假设必填字段是AuthorName和AuthorCompany。

我知道如何继续使用jQuery $.get和按钮onclick函数，但我不知道如何在验证这些必填字段之前触发$.get函数onclick仅在字段为正确输入。如果输入的字段不是valide（使每个NON-validate字段可见），我不知道如何使<img src="error.png" style="display:none">可见。

Answer 1

你可以这样做：

 <form action ="">
    <!-- First Author -->
    Author Name: <input type="text" id="AuthorName1" name="authorNAMEinput">
     <img src="error.png" id="AuthorName1_error" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB1" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany1" name="authorCompanyinput">
     <img src="error.png" id="AuthorCompany1_error" style="display:none">
    <!-- Second Author -->
    Author Name: <input type="text" id="AuthorName2" name="authorNAMEinput">
     <img src="error.png" id="AuthorName2_error" style="display:none">
    Author DOB: <input type="text" id="AuthorDOB2" name="authorDOBinput">
    Author Company: <input type="text" id="AuthorCompany2" name="authorCompanyinput">
     <img src="error.png" id="AuthorCompany2_error" style="display:none">
    <!-- Third Author snipped -->
    <input type ="button" id="authorbutton" name="authorbuttoninput">
</form>
<script>
  $('#authorbutton').click(function() {
    var valid = true;
    var requiredFields = ['AuthorName1','AuthorCompany1','AuthorName2','AuthorCompany2'];
    for(var i = 0; i < requiredFields.length; i++) {
      var val = $('#'+requiredFields[i]));
      if (!val) {
        $('#'+requiredFields[i]+'_error').show();
        valid = false;
      } else
        $('#'+requiredFields[i]+'_error').hide();
    }
    if (valid) {
      // ajax stuff
    }
  });
</script>

jQuery使用onclick按钮验证表单

1 个答案: