Question

我正在研究jQuery验证插件。点击提交首先它有验证和第一个表格并显示自定义错误信息，一旦输入值，然后如果我点击提交它已隐藏第一个表格并显示第二个表格。

这是我的HTML代码

<form id="form1" method="post">
    <div id="div_form1">
        <input type = "text" id="txt_fname" name="txt_fname"/>
        <select id="opt_sel" name="kindly select the value">
            <option>
                Select
            </option>
            <option>
                Bananana
            </option>
        </select>
        <button id="btn_form">Submit</button>
    </div>
    <div id="div_form2">
    <input type = "text" id="txt_lname" name="txt_lname"/>
    <select id="opt_sel" name="kindly select the value">
        <option>
            Select
        </option>
        <option>
            Bananana
        </option>
    </select>
    <button id="btn_form1">Submit</button>
    </div>
</form>
<form id="form2" name="form2" method="post">
    <div id="div_form3">
        <input type = "text" id="txt_mname" name="txt_mname" />
        <button id="btn_form3">Submit</button>
    </div>
</form>

CSS

.error_field{
    background-color:red;
    color:black;
    border:1px solid red;
}

jquery的

$("#div_form2").hide();
$("#div_form3").hide();

$("#form1,").validate({
    rules:{
        txt_fname:{
            required:true 
        }
    },
    messages :{
        txt_fname:"Fill this field"
    }
});

使用此代码，第二个表单是隐藏，第一个表单正在验证，但选项选择字段未验证:(一旦输入的值未提交且未显示form2。请帮助我，因为我是新的到了jquery我在这里苦苦挣扎

这是小提琴Link

提前致谢。

谢谢＆amp;问候马哈德

Answer 1

您可以为Select添加自定义角色验证并添加submitionHandler。

     $.validator.addMethod("valueNotEquals", function(value, element, arg){
      return arg != value;
     }, "Value must not equal arg.");

   $("#div_form3").hide();

    $("#form1").validate({
        rules:{
            txt_fname:{
                required:true 
            },
            txt_lname:{
                required:true 
            },
            kindlyselectthevalue: { valueNotEquals: "default" }
        },
        messages :{
            txt_fname:"Fill this f_Name",
            txt_lname:"Fill this l_Name",
            kindlyselectthevalue:"Fill this select"
        },
        submitHandler: function(form) {
            $("#form1").hide();
            $("#div_form3").show();
        }
    });

尝试https://jsfiddle.net/8he5r48s/2/

使用带有表单

1 个答案: