0

我有一个验证代码，但不是一个正确的验证，它只是针对空白输入字段。当我单击提交时，我也想要电话，然后显示消息，如果我再次填写章程，则显示错误，如果填写号码，则它将处理下一个提交。和电子邮件一样，我们可以把代码写得更短吗？

$(function() {  
  $('.error').hide();  
  $(".button").click(function() {  
    // validate and process form here  

    $('.error').hide();  
      var name = $("input#name").val();  
        if (name == "") {  
      $("div#name_error").show();  
      $("input#name").focus();  
      return false;  
    }  
        var address = $("input#address").val();  
        if (address == "") {  
      $("div#address").show();  
      $("input#address").focus();  
      return false;  
    }  
        var company = $("input#company").val();  
        if (company == "") {  
      $("div#company").show();  
      $("input#company").focus();  
      return false;  
    }  


     var age = $("input#age").val();  
        if (age == "") {  
      $("div#age").show();  
      $("input#age").focus();  
      return false;  
    }  


       var dob = $("input#dob").val();  
        if (dob == "") {  
      $("div#dob").show();  
      $("input#dob").focus();  
      return false;  
    }  




  });  
});

这是html

<form action="" method="post" >
    <table style="width: 800px;margin:90px auto;">
        <tr>
            <td class="space">User Name</td>
            <td class="space"><input name="name" type="text" id="name" /><div id="name_error" class="error">This field is required.</div></td>
        </tr>
        <tr>
            <td class="space">Address</td>
            <td class="space"><input name="address" type="text" id="address" />
                <div id="address" class="error">This field is required.</div>
            </td>
        </tr>
        <tr>
            <td class="space">Company</td>
            <td class="space"><input name="company" type="text"  id="company" />
                <div id="company" class="error" >This field is required.</div>
            </td>
        </tr>

        <tr>
            <td class="space">Age</td>
            <td class="space"><input name="Age" type="text" id="age" />
                <div id="age" class="error" >This field is required.</div>
            </td>
        </tr>
        <tr>
            <td class="space">Date Of Birth</td>
            <td class="space"><input name="dob" type="text" id="dob" />
                <div  class="error" id="dob" >This field is required.</div>
            </td>
        </tr>
        <tr>
            <td class="space">
            <input  name="submit" class="button" id="submit_btn"  type="button" value="button" />&nbsp;</td>
            <td class="space">&nbsp;</td>
        </tr>
    </table>
</form>

在工作 HTML 中查看

http://jsfiddle.net/Abhinav/g5YWh/

4

2 回答 2

0

"can we wright the code shorter?"

Yes, there are a number of ways to do that - here's the first way that came to mind that doesn't involve an improvement to your html structure:

  $(".button").click(function() {  
     // validate and process form here  

     return($('.error').hide()  // hide all the error messages
        .prev()                 // find their previous siblings, the actual fields
        .filter(function() { return this.value === ""; }) // just get empty ones
        .next()                 // then get the empty ones' associated error messages
        .show()                 // and show them
        .first()                // then get the first one
        .prev()                 // find its related field
        .focus().length === 0); // and set focus
  });

Demo: http://jsfiddle.net/g5YWh/1/

Though speaking of your html structure, it is invalid because id is supposed to be unique. If you want to associate fields don't give them the same id, use data- attributes, or make use of their sibling (or other) relationship - note that the code I've shown above doesn't use any ids...

I added the return statement with a test of .length === 0 so that if you applied the code to a submit button or to the submit event of a form it would cancel the submit if any errors were found.

于 2013-06-12T12:35:57.290 回答
0

尝试使用 jquery 验证

添加链接

<script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>

在每个输入中给出 class="required"

<input name="name" type="text" id="name"  class="required"/>

$("#form1").validate();
于 2013-06-12T12:25:56.130 回答