Custom validation using jquery with forms

Question

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

LTasty · Accepted Answer · 2015-08-09 11:09:25Z

1

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/

answered Aug 9, 2015 at 11:09

LTasty

2,00815 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr.M Over a year ago

Hi thanks, for the reply i have few more query i want to add custom css error and in the second form also i need validation kinldy please help me

Mr.M Over a year ago

Hi @LTasty one small request is that possible can i use two css class for error label one is for text field and other one is for select field. As I want the text field error should be inside the text box like place holder :) Kindly please help me

Mr.M Over a year ago

Hi LTasty I have some questions what is the purpose of giving three parameter inside the jquery functin and what is the use of addmethod kindly please help me to identify

Collectives™ on Stack Overflow

Custom validation using jquery with forms

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related