Question

我有一个验证代码，但没有适当的验证，只适用于空白输入字段。我想要电话，当我点击提交然后显示消息，如果我再次填写章程显示错误如果填充号码然后它将处理下一个提交。与电子邮件相同，我们可以缩短代码吗？

$(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/

Answer 1

尝试使用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();

Answer 2

“我们可以缩短代码吗？”

是的，有很多方法可以做到这一点 - 这是我想到的第一种不涉及改进你的html结构的方法：

  $(".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
  });

演示：http://jsfiddle.net/g5YWh/1/

虽然谈到你的html结构，但它是无效的，因为id应该是唯一的。如果你想关联字段，不要给它们相同的id，使用data-属性，或者使用他们的兄弟（或其他）关系 - 请注意我上面显示的代码没有'使用任何ids ......

我添加了return语句并测试了.length === 0，因此，如果您将代码应用于提交按钮或表单的提交事件，则会在发现任何错误时取消提交

使用Jquery验证？

2 个答案: