I'm having a performance problem due to a big form I have where there is a table that can contain 100+ records. The reason is that when I submit the form the validation for every single item is fired and this is causing a 5s delay which is unacceptable.
Is there a way to disable this just for this event in this form? I'm performing the validations on the onblur event and on the serverside, so I think it will be safe if I just skip it on the onsubmit event.
I've tried the following and it has not worked:
//1
$.validator.setDefaults({
onsubmit: false
});
//2
var validationSettings = $.data($('form')[0], 'validator').settings;
validationSettings.onsubmit = false;
//3
$("form").validate().cancelSubmit = true; //This is on the onclick of the submit button
If you add the class cancel to your submit button, that will signal jquery.validate.js that validation should not be done when the submit button is clicked.
UPDATE
jquery.validate.js contains the following:
// allow suppresing validation by adding a cancel class to the submit button
inputsAndButtons.filter(".cancel").click(function () {
validator.cancelSubmit = true;
});
Based on the behavior you are reporting, you must have something else attached to your submit event which is overriding the behavior of jquery.validate for a submit button with the cancel class.
Please examine each step in the image you posted of the event progress. There is almost certainly something in that tree which will indicate where the default behavior is being overridden.
Related
We are currently binding to the click event of a submit button (there are reasons why we are not binding to the submit event for the form). Is it guaranteed that our JS will run before the form submits (as we are entering values into hidden fields that we want to submit) or do we need to prevent the form from submitting and then call the submit again?
$(function() {
$('#button').on('click', function() {
// Do some stuff here - needs to finish before the form submits
return true;
});
});
Thanks in advance!
It will work before the submit event is sent, but you are only listening for the click event. If the user hits enter, the form will be submitted without running your code. I think you should stick to the submit event. The callback function will receive as argument the event (and you can do things like e.preventDefault(); or e.stopPropagation();
$("form").on("submit",function(event){});
In my expierience the code in the click event will always run first.
I just ran a simple test on latest chrome with a loop that loops 10,000 times. The form did not submit until after the loop was finished (~5 seconds).
If you try to run some ajax call, or setTimeout in the click function though, the form will most likely submit before your callback/ajax is finished.
I have an application that uses backbone.js and jQuery for UI. I have a form on a page, attached to the form's text box blur event is a function that under certain conditions shows the user a popup and awaits it's input - the conditions are checked using an ajax call to a WCF service.
Everything works fine until i click the form's submit button while the focus is set on the text field - then the popup is displayed but behind it the form is submitted.
Of course the proper result would be cancelling the second event(if the popup is displayed the form definitely cannot be submitted)
How can I achieve this?
i can'T understand you but probably this is what you need: event.stopPropagation();
http://api.jquery.com/event.stopPropagation/
Or .off()
http://api.jquery.com/off/
You can bind to the submit event of the <form> and call its preventDefault() method to inhibit submission if the popup is visible:
$("form").submit(function(e) {
if ($("selector_matching_your_popup").is(":visible")) {
e.preventDefault(); // Cancel submission.
}
});
You can also return false from the handler instead of calling preventDefault(), but this will also stop the propagation of the submit event to ancestor elements, which you may not want.
Are you saying that the clicking of 'submit' is causing the popup to display - and this is not one of the 'certain conditions' where it should be displayed? I would consider adding a condition to the blur handler that checks to see if the submit button was clicked. Dont display the popup in this case.
Cancel the event in the onSubmit handler -
form.addEventListener("submit", function(evt){
evt.cancel()
//dont want to catch it again
form.removeEventListener(this)
popup.show()
//have the popup call submit when done, it wont be caught again
}
I want to submit a form using ajax. So I am not using the type=submit. I am using a onClick event on a link(<a>) to send the form data using ajax. I also want to take advantage of HTML5 form validation capabilities.
So before sending the data, I used the function .checkValidity to check the validity of the form.
If it returns true then I send the data. But when it return false I want to show user that the form is invalid using HTML5 default notifying scheme. But I don't know how to trigger that.
Is there is any way to show the validation of the form programmatically.
One way to do is trigger the submit event if checkValidity return false. But this will refresh the page. I don't want to change the state of the page.
checkValidity only checks validity and inform the program. It doesn't inform the user interactively.
We have exactly the same problem and we tried very different things and a lot of them were hacks like pseudo submits and event.preventDefault() approaches. All in all i must say that HTML5 validation is nice in general but really bad in practice because its not possible to display backend validation errors the same way as frontend validation errors.
And only god knows why the HTML5 folks didnt thought about a simple API where we can trigger the validation like this element.triggerValidationMessage('my message');
You can do it if you let your form have a submit button and return false!
And you cán do it in the same event handler as the non-submits!
So, first test if you are part of a form and if so, make it check Validity and never return true (even if valid)!
$('.ajx')
.on("submit click", function(e) {
var $this = $(this)
//Force native form validating and notification
form = $this.closest('form')[0]
if (form) {
//Follow through with form submit (element must be of submit type!)
if(!form.checkValidity()) {
//don't ask me!
sleep(3000);
return false
}
}
//only preventDEfault AFTER possible form element click
e.preventDefault()
//...your project further ajax code
//Makes sure your form never submits
if (e.type=='submit') return false
}
Small downside: You have to do this on the submit button, but it's always possible to change your <a> into type=submit. You don't have to change the non form <a>'s though!
Check out this jsbin.
I have a form with a custom button that submits it via ajax (not a real submit button).
I'm using jquery-validation to validate the form, and running validate().checkForm() to validate it.
My question is - why don't the error messages on the specific fields appear when I do this? They appear all right when I'm using a standard submit button.
Edit: My example doesn't include the ajax submission, but just pretend it's there.
Because validate is listening for the submit event.
If you add $("form").submit(); inside the click event then it is fired.
http://jsbin.com/avuhed/edit#javascript,html,live
Piggy-backing on what #weezer said, you'll need to associate the form submission event with the button click, and you'll also want to put it inside the form itself. Right now it's sitting outside of it. For future updates, and sanity, it'll make your life easier to keep it grouped together.
The jquery validation is triggered by a standard form submit.
You may need to attach a .click handler to your custom submit button as so:
var isValid = $("#yourForm").valid();
if(isValid) {
// Do stuff
}
Yes, i have and if you put:
$("#submit").click(function() {
var isValid = $("#form").isValid();
if(isValid) {
alert('test');
}
});
Instead of what you have and move the custom button within the form, the validation works. http://jsbin.com/ajeyot/9
I've got an onsubmit handler added to a form like so:
$('#content_form').bind('submit',function(e) {
source = $(e.target).attr('name');
alert(source);
return false;
});
so e.target = the form element. I'm using several submit buttons, and need to determine which one was actually clicked (in modern browsers, that clicked button is the only one that submits, I'm doing this for IE6 compat - it submits the values of all the buttons).
My only thought it to kill any onsubmit events, and then tie click events to the buttons themselves. This would kill the form functionality entirely if javascript wasn't enabled, so I'd like to avoid this.
An easy (but possibly naive) implementation would be to have the onclick handler for each button set a field indicating which one was the last one clicked. In your submit handler, you could then check the value of this field.
$('#content_form input:submit').bind('click', function(e) {
$('#content_form').submit();
// you can now reference this or $(this),
// which should contain a reference to your button
});
Have you checked out the jQuery Form Plugin? It handles submitting forms via ajax very nicely and will handle this problem (along with many others) for you.
Something else you could do is use preventDefault(); instead of return false