0

I implemented some custom validation logic with JQuery and Unobtrusive validation with help of the following post:

Manually set unobtrusive validation error on a textbox

To save you time reading through that post here is the simple javascript that forces a validation message to be displayed if something fails:

On my textbox .blur():

var errorArray = {};
errorArray["Slug"] = 'Some error message for the Slug text box';
$('#SomeFormId').validate().showErrors(errorArray);

Works great.

My problem is while the failed validation message is displayed, when submit is clicked the form submits just fine.

How can I implement custom validation with code above and prevent the form from being submitted when the message is displayed ? I tired doing something like $('#SomeFormId').valid = false; but it didn't work.

Thank you.

Community
  • 1
  • 1
InspiredBy
  • 4,271
  • 6
  • 40
  • 67
  • Do you also validate your form on submit? Can you share more code? Jquery's validate should prevent the form from submitting if the form does not validate so it seems something is wrong. – quoo Oct 02 '12 at 18:26
  • I don't have any extra code on the submit button click(). – InspiredBy Oct 02 '12 at 18:31

2 Answers2

2

Using $('#SomeFormId') will not work because when you do:

$('#SomeFormId').valid = false;

and then when you access it in your form submit handler again using (what I assume):

var form = $('#SomeFormId');   // or $(this)
if (form.valid) {
    //
}

You're essentially creating two different objects, even though they're referring to the same DOM element. So setting valid = true in one will not update it in the second.

The code you gave is very barebones though, so I'm assuming that your validation is separate from your submit handler (since it's in blur anyway), so what you can do is utilize something like .data() or a flag (just make sure that it's in context).

// on blur
$('#SomeFormId').data('isvalid', false);    // invalid

// on submit
var isvalid = $('#SomeFormId').data('isvalid');
if (!isvalid) {
    // invalid form
    ev.preventDefault();
}

EDIT

The jQuery Event object

When you bind a function as an event handler in jQuery, one of the things that jQuery does silently for you is it "creates" a normalized Event object for you. This will contain information about the event you can use in the handler, and also allows you to control the behavior of the event in some ways.

// setting a submit event on my form
//                                       |   whatever you put here 
//                                       V   is the event object.
$('#SomeFormId').on('submit', function (ev) {

    // preventing the default action
    // : in a form, this prevents the submit
    ev.preventDefault();
});
Richard Neil Ilagan
  • 14,627
  • 5
  • 48
  • 66
  • Sorry, still learning. Can I confirm ? ev = returning event param ? – InspiredBy Oct 02 '12 at 18:38
  • The `ev` is the jQuery event object. It gets passed into any function you bind as an event handler in jQuery. Let me clarify that a bit in an edit. – Richard Neil Ilagan Oct 02 '12 at 18:41
  • This worked. Thank you. Before I close the question would you happen to know a good way to retain the error message on the screen. This logic definitely prevents the form from being submitted but no validation is displayed. Ofcourse I can duplicate the logic I used on blur() do display the error but can you think of a good way to avoid having duplicate code and keeping the error on the screen while form submission is restricted ? – InspiredBy Oct 02 '12 at 19:20
  • Since you're doing the validation on `blur`, I'd recommend you keep the logic responsible for displaying the validation messages *in* the `blur` handler. I don't exactly get what you mean by "keep them on screen", because as far as I'm concerned (and without looking at more of your code), that just sounds like a matter of showing / hiding text on the DOM. You can do that with something as trivial as CSS, for example. – Richard Neil Ilagan Oct 02 '12 at 19:27
  • Simply put when blur() on the text box occurs with failed validation an error message is displayed. Next I click Submit and the form is restricted from being submited but the red validation message is now gone! I'm looking for the way to retain the message after submission was denied. Sorry for any confusion. – InspiredBy Oct 02 '12 at 19:31
1

To check if the form is valid, you can use something like this:

var form = $("#SomeFormId");
form.submit(function(event) {
    if(form.valid() == false) event.preventDefault();
}

Edited to add a bit more to it, this will take care of your submission/prevention, now you just add in your validation calls.

naspinski
  • 34,020
  • 36
  • 111
  • 167