基於dropdownbox的選擇動態驗證文本框

Question

我有一個下拉框&一個文本框。 下拉框中有2個值1.金額2.名稱 我希望當我選擇金額時，字段應該是數字真 ，當我選擇名稱，字段應該只接受字符。 我如何在jQuery中實現這一點。 我正在使用驗證插件。

下面是代碼

<select name="cmbParameter" class="forminputbox" id="cmbParameter"> 
    <option value="">---Select---</option> 
    <OPTION value="1">Amount</OPTION><OPTION value="2">Name</OPTION></select> 

和驗證JS是

$("#frmParameter").validate({ 
rules:{ 
    cmbParameter:{ 
     required:true 
    }, 
    txtValue:{ 
     required:true 
    } 

}

Answer 1

• 只要select元素值發生更改，就可以使用插件的.rules() methods動態更改規則。

• 使用the .valid() method在更改規則後立即觸發驗證測試。

• 使用additional-methods.js file中的lettersonly規則。

工作演示：http://jsfiddle.net/5WpAw/1/

$(document).ready(function() { 

    // initialize the plugin 

    $('#frmParameter').validate({ 
     rules: { 
      cmbParameter: { 
       required: true 
      }, 
      mytext: { 
       required: true 
      } 
     } 
    }); 

    // dynamically change the rules upon selection 

    $('#cmbParameter').on('change', function() { 

     $('input[name="mytext"]').rules('remove'); 

     if ($(this).val() == 1) { // Amount 
      $('input[name="mytext"]').rules('add', { 
       digits: true, 
       required: true 
      }); 
     } else if ($(this).val() == 2) { // Name 
      $('input[name="mytext"]').rules('add', { 
       lettersonly: true, 
       required: true 
      }); 
     } 

     $('input[name="mytext"]').valid(); // trigger validation of the text field (optional) 

    }); 

}); 

Answer 2

添加自定義的方法來檢查字母

$.validator.addMethod("CheckAlpha", function (value, element) { 

    if ($('#cmbParameter').val() == "2") { 
     if ($("#txtValue").val().match(/^[a-zA-Z]+$/)) 
      return true 
     else 
      return false; 
    } 
    else 
     return true 
}, "Please enter a valid Number "); 





$("#frmParameter").validate({ 
rules:{ 
    cmbParameter:{ 
     required:true 
    }, 
    txtValue:{ 
     required: true, 
       digits: { 
        depends: function (element) { 
         return $('#cmbParameter').val() == "1"; 
        } 
       }, 
       CheckAlpha: true 
    } 
} 

Answer 3

<script src="Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     function DeleteRow(btn) { 

      //alert("delete" + btn); 
      var tr = btn.closest('tr'); 
      tr.remove(); 
     } 
     $(".btnsd").click(function() { 
      // debugger; 
      alert("hjkghk"); 
      divs = $('.val') 
      for (ind in divs) { 
       var div = divs[ind]; 
       if (div.value == "") { 
        div.focus(); 
        return false; 
       } 
      } 
      $('#Employertbl').append(
            '<tr>' + 
             '<td> @Html.TextBox("item.employer_name", null, new { @class = "form-control val" })</td>' + 
             '<td width="24%"> <div style="float:left; padding-right:5px;">@Html.TextBox("item.duration_From", null, new { @id = "", @placeholder = "From Date", @class = "form-control input-date datepicker val", @readonly = true })</div> ' + 
               '<div>@Html.TextBox("item.duration_to", null, new { @id = "", @class = "form-control input-date datepicker val", @placeholder = "To Date", @readonly = true })</div></td>' + 
             '<td> @Html.TextBox("item.designation", null, new { @class = "form-control val" })</td>' + 
             '<td> @Html.TextBox("item.worked_skill", null, new { @class = "form-control val" })</td>' + 
             '<td> @Html.TextBox("item.proj_handled", null, new { @class = "form-control val" })</td>' + 
             '<td> @Html.CheckBox("item.current_employed",new{@class = "current" })</td>' + 
             '<td><input type="button" value="Remove" onclick="DeleteRow(this)" name="delete" class="btn blue pull-right" /> </td>' + 
            '</tr>' 
            ); 



     }); 
    }); 
</script> 


<div class="table-responsive"> 
    <table id="Employertbl" class="table table-striped table-bordered table-hover dataTable no-footer"> 
     <tbody> 
      <tr> 
       <th>Employer Name</th> 
       <th>Duration</th> 
       <th>Designation</th> 
       <th>Worked skill(s)</th> 
       <th>Reason of change</th> 
       <th>Currently Employed</th> 
       <th>Action</th> 
      </tr> 

      <tr> 
       <td> 
        <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""> 
       </td> 
       <td width="24%"> 
        <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date" type="text" value="" id="dp1459328857835"></div> 
        <div> <input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date" type="text" value="" id="dp1459328857836"></div> 

       </td> 
       <td> 
        <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""> 
       </td> 
       <td> 
        <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""> 
       </td> 
       <td> 
        <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""> 
       </td> 
       <td> 
        <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"> 
       </td> 
       <td> 
        <input id="myButton" type="button" value="add" name="delete" class="btnsd bcbn"> 
       </td> 
      </tr> 


      <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date" type="text" value="" id="dp1459328857837"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date" type="text" value="" id="dp1459328857838"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td> <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd dfsd"> </td></tr> 
      <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date" type="text" value="" id="dp1459328857839"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date" type="text" value="" id="dp1459328857840"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td> <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd"> </td></tr> 
     </tbody> 
    </table> 
</div>