CODEWITHSUNDEEP
javascriptjquerycssvalidation
Mr.M
Mr.M

Reputation: 1480

Custom validation using jquery with forms

I am working on jQuery validation plugin. On click of the submit first it has validate and first form and show custom error message and once the values are entered then if i click submit it has hide the first form and show the second form.

Here is my HTML Code for that

<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"
    }
});

With this code the second form was hide and the first is getting validated but the option select field was not validating :( once the values or entered it was not submiting and it was not showing form2. Kindly help me as I am new to jquery i am struggling here a lot

Here is the fiddle Link

Thanks in advance.

Thanks & Regards Mahadevan

Upvotes: 2

Views: 95

Answers (1)

LTasty
LTasty

Reputation: 2008

You can add a custom role validation for Select and add 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();
        }
    });

Try https://jsfiddle.net/8he5r48s/2/

Upvotes: 1

Related Questions