使用带有表单的 jquery 进行自定义验证

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

提前致谢。

感谢和问候 马哈迪文

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/