asp net mvc custom client side validation for one field

Question

I want to the override default client side validation for only one form field.

what I did is:

  $( ".txt-field" ).change( function( event )
  {
     if ( !checkField( $(this).val() ) )
     {
        $(this).removeClass("valid").addClass("input-validation-error");
     }
     else
     {
        $(this).addClass("valid").removeClass("input-validation-error");
     }
  } );

and my HTML is

           <div class="fields">
               @Html.LabelFor( m => m.BlahBlah.Field, "Field" )
               @Html.TextBoxFor( m => m.BlahBlah.Field, new { @class = "textbox txt-field" } )
           </div>

but it's not working. checkField function returns true/false. When I'm at the javascript debugger, and the checkField returns false, I see the input-validation-error class to be added to my input field but then right after that, it is removed and "valid" class is added to it! what am I doing wrong???? I have removed any model validation attributes like "required", "maxLength", etc..

Khalid · Accepted Answer · 2013-05-29 11:26:55Z

1

Try to add logic on "blur" method instead of "change" method.

 $( ".txt-field" ).blur( function( event )
{
 if ( !checkField( $(this).val() ) )
 {
    $(this).removeClass("valid").addClass("input-validation-error");
 }
 else
 {
    $(this).removeClass("input-validation-error").addClass("valid");
 }

} );

answered May 29, 2013 at 11:26

Khalid

1944 bronze badges

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

1 Comment

celticharp Over a year ago

thank you!! but can you please explain me why blur worked instead of change??

rishikesh tadaka · Accepted Answer · 2013-05-29 08:57:02Z

0

I found mistakes in your logic. In else block first should remove class then add new class. verify following code :

  $( ".txt-field" ).change( function( event )
  {
     if ( !checkField( $(this).val() ) )
     {
        $(this).removeClass("valid").addClass("input-validation-error");
     }
     else
     {
        $(this).removeClass("input-validation-error").addClass("valid");
     }
  } );

answered May 29, 2013 at 8:57

rishikesh tadaka

4831 gold badge6 silver badges18 bronze badges

1 Comment

celticharp Over a year ago

thank you but still not working. valid class is added although checkField method returns false, even if I comment the else block.

Collectives™ on Stack Overflow

asp net mvc custom client side validation for one field

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related