How to check if my form is valid after click on `add_button` and if is not than change color of input/select?

Question

HTML:

<select id="id_myselect" name="myselect">
   <option value="0">---------</option>
   <option value="1">1</option>
   <option value="7">2</option>
   <option value="10">3</option>
</select>

<select id="id_book" name="book">
   <option value="0">---------</option>
   <option value="1">Book1</option>
</select>

<input id="id_number" name="number" type="number" />
<div id="add_button">Add</div>

How to check if my form is valid after click on add_button and if is not than change color of input/select?

My try with jQuery:

if($( "#id_myselect option:selected" ).val() == 0){
       $("#id_myselect").addClass( "error" );
    }
else if($( "#id_book option:selected" ).val() == 0){
       $("#id_book").addClass( "error" );
}    

else if($( "id_number" ).val() <= 0){
       $("#id_number").addClass( "error" );
}

score 1 · Answer 1 · answered Mar 06 '14 at 06:37

Try this on clicking of a div like

$(function(){
    $('#add_button').on('click',function(){
        if($( "#id_myselect" ).val() == 0){// remove option:selected
           $("#id_myselect").addClass( "error" );
        }else if($( "#id_book" ).val() == 0){// remove option:selected
           $("#id_book").addClass( "error" );
        }    
        else if($( "#id_number" ).val() <= 0){
           $("#id_number").addClass( "error" );
        }
    });
});

Demo

score 0 · Accepted Answer · answered Mar 06 '14 at 06:32

0

onclick of add_button Check $('.error').length. If it is zero then there is no error:

 $('#add_button').on('click',function(){
     if($('.error').length!=0){
        console.log('Error exist');
     }
 });

And when it comes to changing color, add css to .error class.

answered Mar 06 '14 at 06:32

Milind Anantwar

81,290
25
94
125

Can I add background color for `select` input? – user3386824 Mar 06 '14 at 06:33
@user3386824 you can refer this to change color of select http://stackoverflow.com/a/12836286/2567813 – CJ Ramki Mar 06 '14 at 06:36
You should clear the error class from all element on every add_button click. – Milind Anantwar Mar 06 '14 at 06:52
@user3386824:problem still persists?? can you create the fiddle?? – Milind Anantwar Mar 06 '14 at 07:04

How to check if my form is valid after click on `add_button` and if is not than change color of input/select?

2 Answers2