Question

我已经尝试过，我已经研究过，我仍然无法弄清楚如何使用jQuery验证此表单。我甚至试图查看jQuery API，但我没有运气。这应该不像看起来那么难。还有一些我尚未使用的身份证，因为我希望在继续之前得到我迄今为止所做的工作。我能找到的用于验证电子邮件的最佳方法就是直接使用JavaScript。这是我的代码。

$(document).ready(function(){
  $("#sendForm").click(function(){
    var validForm=true; //set valid flag to true, assume form is valid

    //validate customer name field.  Field is required
    if($("#custName").val()) {
      $("#custNameError").html("");       //field value is good, remove any error messages        
    } else {
      $("#custNameError").html("Please enter your name.");
      validForm = false;  
    }

    //validate customer phone number.  Field is required, must be numeric, must be 10 characters
    var inPhone = $("#custPhone").val();    //get the input value of the Phone field
    $("#custPhoneError").html("");          //set error message back to empty, assume field is valid    
    if(!inPhone) {
      $("#custPhoneError").html("Please enter your phone number.");
      validForm = false;                  
    } else {
      //if( !$.isNumeric(inPhone) || Math.round(inPhone) != inPhone ) //if the value is NOT numerice OR not an integer.   Rounding technique
      if( !$.isNumeric(inPhone) || (inPhone % 1 != 0)  )              //if the value is NOT numerice OR not an integer.   Modulus technique           
      {
        $("#custPhoneError").html("Phone number must be a number.");
        validForm = false;  
      } else {
        if(inPhone.length != 10) {   
          $("#custPhoneError").html("Phone number must have 10 numbers");
          validForm = false;                      
        }
      }
    }

    //ALL VALIDATIONS ARE COMPLETE.  If all of the fields are valid we can submit the form.  Otherwise display the errors
    if(validForm) {
      //all values are valid, form is good, submit the form
      alert("Valid form will be submitted");  
      //$("#applicationForm").submit();       //SUBMIT the form to the server
    } else {
      //form has at least one invalid field
      //display form and associated error messages
      alert("Invalid form. Display form and error messages");
    }
  }); //end sendform.click
}); //end .ready    

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

label   {
  width:150px;
  display:inline-block;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2></h2>
<h3>Form Validation Project - Complaint Form</h3>
<form id="form1" name="form1" method="post" action="">
  <p>Please enter the following information in order to process your concerns.</p>
  <p> 
    <label for="custName">Name:</label>
    <input type="text" name="custName" id="custName" />
    <span id="custNameError" class="errorMsg"></span>
  </p>
  <p>
    <label for="custPhone">Phone Number: </label>
    <input type="text" name="custPhone" id="custPhone" />
    <span id="custPhoneError" class="errorMsg"></span>
  </p>
  <p>
    <label for = "email">Email:</label>
    <input type = "text" name = "emailAdd" id = "emailAdd" />
    <span id = "emailError" class = "emailError"></span>
  </p>
  <p>Please Select Product Group:</p>
  <p>
    <label>
      <input type="radio" name="custProducts" value="books" id="custProducts_0" />
      Books
    </label>
    <br />
    <label>
      <input type="radio" name="custProducts" value="movies" id="custProducts_1" />
      Movies
    </label>
    <br />
    <label>
      <input type="radio" name="custProducts" value="electronics" id="custProducts_2" />
      Consumer Electronics
    </label>
    <br />
    <label>
      <input type="radio" name="custProducts" value="computer" id="custProducts_3" />
      Computer
    </label>
    <br />
  </p>
  <p>Description of problem:    (Limit 200 characters)</p>
  <p>
    <label for="custComplaint"></label>
    <textarea name="custComplaint" id="custComplaint" cols="45" rows="5"></textarea>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="File Complaint" />
    <input type="reset" name="button2" id="button2" value="Reset" />
  </p>
</form>
<p>&nbsp;</p>

Answer 1

 $("#button").click(function(e){
    e.preventDefault(); // you need to stop the initial event to have a chance to validate
    var validForm=true;
    // etc...

Answer 2

为了让您入门，html中的提交控件具有ID“按钮”，因此您应该使用$('#button').click，而不是$('#sendForm').click。

此外，如果您想留在页面上（比如进行验证，显示错误等），则必须在单击按钮时阻止表单自动提交。有很多方法可以做到这一点，但最简单的方法是将按钮类型从submit更改为button。即，替换它：

<input type="submit" name="button" id="button" value="File Complaint" />

用这个：

<input type="button" name="button" id="button" value="File Complaint" />
             ------

这应该让你开始，至少你的代码会运行，你可以使用console.log来调试等等。祝你好运。

更新

我应该补充一点，如果您接受我的建议，表单将永远不会自行提交 - 如果某些验证失败并且您希望留在页面上并向用户提供一些错误反馈，则表示良好。

当您做希望表单提交时，您必须自己完成。同样，有很多方法可以做到这一点，但最简单的方法可能是：

$('#form1').submit();

Answer 3

您可以使用jquery.validate.js来验证您的表单，它将克服您创建验证规则的所有手动工作，同时它还提供各种预定义规则，如required，email，minlength和maxlength等。所以，它将更容易您轻松实现您的需求。

https://jqueryvalidation.org/

Answer 4

我有一个简单的jquery表单验证和提交包 - 看看是否有任何帮助 - 它很容易安装，你可以自定义很多东西：https://github.com/sebastiansulinski/ssd-form

使用jQuery

4 个答案: