基于下拉框的选择动态验证文本框

Question

我有一个下拉框和一个文本框。 下拉框中有 2 个值 1. 金额 2. 名称 我希望当我选择 Amount 时，字段应该是 Number True 当我选择 Name 时，字段应该只接受字符.. 我怎样才能在 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

添加检查字母的自定义方法

$.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 2

• 每当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 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>