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

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 に答える