I have i form i submit via jQuery's .submit(), unfortunately it does not trigger the validation plugin when i do it this way. If i place a submit button inside the form, it works perfectly.
Is there someway to trigger the plugin manually?
Thanks in advance.
$("#myButton").click(function(e) {
e.preventDefault();
if($("#myform").valid()){
// the form is valid, do something
} else{
// the form is invalid
}
});
You can use this
$(".selector").validate({
submitHandler: function(form){
form.submit();
}
});
which autosubmits the form it is valid, so you .validate() instead of submit()
You could try this:
$('#someForm').valid();
which could also be done in the submit handler:
$('#someForm').submit(function() {
if ($(this).valid()) {
} else {
}
});
Related
Following on from this question: Previous question
I have form validation on my form, which needs to be validated first i.e minimum characters and numbers etc.
My Jquery code so far shows the modal after the submit button is pressed and the form has some input in there but not the valid input, so I just need to type a few characters and the modal pops up which is not ideal.
So I need the form to have input and validate then the modal pops up and the user has to accept terms and conditions then they can register.
I have tried the following with no luck:
$(document).ready(function() {
$("#login-form").submit.valid(function(e) {
e.preventDefault();
$(".modal").addClass("active");
});
});
Thanks in advance
You should use an if inside your submit event:
$("#login-form").submit(function(e) {
e.preventDefault();
if ($(this).valid()) { // this assumes you are using something like jquery validate - from your original code, it looks like you were attempting to do this
$(".modal").addClass("active");
} else {
// do error stuff here
}
});
Why use valid? jQuery valid() does not accept any arguments, only returns true. Use validate() instead to use handler.
$("#yourform").validate({
submitHandler: function(form) {
// ...
form.submit();
}
});
you can do this on your form...
<form id="myform" action=".." method=".." onsubmit="return validateForm(this);">
.....
</form>
then in your script you define the validate(this) function which receives the form object(this).
now lets assume you are using the jquery form validation plugin
function validate(formObj){
v = $(formObj).validate({ // initialize the plugin
rules: { //enter additional rules.
input1: {required: true, email:true},
input2: {required: true, integer:true}
},
submitHandler: function(formObj) {
$('#myform').removeAttr('onsubmit'); //remove the onsubmit attr..
$(modal).addClass('active'); //then show the modal here..
}
});
return false; //which stops the form from submitting..
}
now lets assume the modal has popped up and the user has accepted the agreement and clicked on the agree button, which then triggers the form and sends it
function sendFromModal(){
$('#myform').submit();
return true; //
}
this should work, i hope i was helpful enough..
I am using validationEngine to validate a form that is also launching a please wait modal.
Here's the code I am using to do this:
$("#main_form").validationEngine({
onValidationComplete: function(form, status){
if(status) {
ShowProgressAnimation();
form.validationEngine('detach');
form.submit();
}
}
});
The issue I am having is I have a script that launches window.onbeforeunload.
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
});
Normally it would ignore form submissions, but in this case because of the form.submit it's not.
Is there a proper way to detect this and stop the window.onbeforeunload from loading if it detects the form.submit?
Thanks!
EDIT:
I also forgot to add I think this issue only exists in IE.
The given script does not launch window.onbeforeunload, it just assigns a function to it.
If you want to prevent form submission, you need to return false in the submit handler:
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
return false;
});
I am working on this form which is suppose to validate the form before submitting
$(document).ready(function() {
$("#form3").validate();
if ($('#form3').valid()) $('#form3').submit();
});
But the problem is: it prints the (empty fields error) when the form is loaded.
UPDATE : the function is now working Horraaay :) with the following code:
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
The only problem was the input form name .. I used 'submit' as a name of the input form however before was on different name.
Put your code on the form submit event. Something like this:
$(document).ready(function()
{
$("#form3").validate();
$("#form3").submit(function(event)
{
if (!$(this).valid())
{
event.preventDefault();
}
});
});
I think by default after successful validation it will submit the form . However i don't know why you need to resubmit the form.
If you need to submit manually you can use the SubmitHandler place to submit your form.
$("#form3").validate({
submitHandler: function(form) {
form.submit();
}
});
I solved the problem and now it works ...
It is a minor error !
I changed the submit button name and id to ( Submit).
I am using jQuery with the validate plugin at http://docs.jquery.com/Plugins/Validation/validate
I want to prevent the form from submitting after its validation and submission processes done via ajax.
I have the following code:
$("#myform").validate({
rules: {...},
submitHandler: function(form) {
alert("Do some stuff...");
//submit via ajax
return false; //This doesn't prevent the form from submitting.
}
});
However, the problem with this is that the submitHandler submits the form even though I have a return false; statement at the last line of the handling function. I want prevent the default behaviour and to stop the form from submitting because I have already submitted via ajax.
How should I stop the code from submitting after going through the ajax codes in the submitHandler function?
I do it like this and it works exactly how you want it to work:
$("#myform").submit(function(e) {
e.preventDefault();
}).validate({
rules: {...},
submitHandler: function(form) {
alert("Do some stuff...");
//submit via ajax
return false; //This doesn't prevent the form from submitting.
}
});
$("#myform").validate({
rules: {...},
submitHandler: function(form, event) {
event.preventDefault();
alert("Do some stuff...");
//submit via ajax
}
});
Hope this help.
working fiddle
according to jquery plugin validation document.
submitHandler (default: native form submit)
the submission method via submitHandler below is quoted from documentation it should work , but it actually does not work they said that
Callback for handling the actual submit when the form is valid. Gets the form and the submit event as the only arguments. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
Example: Submits the form via Ajax, using jQuery Form plugin, when valid.
$("#myform").validate({
submitHandler: function(form,event) {
event.preventDefault();
$(form).ajaxSubmit();
}
});
i am writing code here what worked for me.
simply call your validayion plugin , and donot include submitHandler in your validation function arguments.
instead of submitting and preventing with submitHandler use jQuery method of form submission. like below
$("form").validate({});
$(document).on("submit", "form", function (event) {
event.preventDefault();
alert("submit");
});
Maybe you can validate externally without using a submit button:
if($("#myform").valid()){
alert("Do some stuff...");
}
You can call event.preventDefault() on submit event:
$("#myform").on("submit", function(event) {
event.preventDefault();
});
You can code this in a very simple way via "jQuery Walidate".
http://jquery.dop-trois.org/walidate/
There you can code a function, that will be executed on submit.
Look for Callback in the Documentation.
unfortunately it seems that the call: submitHandler: function(form){ does not take an event argument so it seems that the only solution is a return false statement like this:
...
submitHandler: function(form) {
//your code
return false;
},
...
I fixed this way. A patch for a jQuery Validation Plugin bug that it's not fixed even on v1.19.0
$('#save_edit_user').on('click', function () {
var isValid = $("#edit_user").validate().form() && $("#edit_user").validate().element("#edit_user_email");
//check current ajax call by $.active
//the form is not submitted before 0 ajax is running
if (isValid && $.active == 0){
// my save logic
}
});
I have two forms on our site #footer_leads and #footer_leads2 and i have a live submit event but need to verify a few things before the form gets summitted so i have this code
$('#footer_leads2, #footer_leads').live('submit', function(e){
e.preventDefault();
console.log('again');
var form = $(this); //save reference to form
if(somevalidation){
form.die();
form.submit(); //submit form
}
I assumed the jQuery die event would do the trick like in the above example but the page just into an infinite loop and crashes my browser....any ideas on how to do this
From the jQuery die() page:
Note: In order for .die() to function correctly, the selector used
with it must match exactly the selector initially used with .live().
Try $('#footer_leads2, #footer_leads').die() instead.
You shouldn't need to remove the handler and resubmit. Just wait on the preventDefault() until you know whether or not the form passed validation:
$('#footer_leads2, #footer_leads').live('submit', function(e) {
if (!somevalidation)
e.preventDefault();
// Else, the form will continue submitting unimpeded.
});
Are you want to disable the form after the submit?
if yes, try this:
$('input[type=submit]', this).attr('disabled', 'disabled');
I hope its help,
Don't unbind/die.
Just submit the form with the native method.
$('#footer_leads2, #footer_leads').live('submit', function() {
if (true /* validation succeeded */ ) {
this.submit(); //submit form, but don't use jQuery's method
} else {
return false;
}
});
UPDATE:
Since it sounds like you're making an AJAX call for the validation, you could just do the this.submit() in the success: callback.
$('#footer_leads2, #footer_leads').live('submit', function() {
$.ajax({
url: 'some/path',
context: this, // set the context of the callbacks to the element
...
success: function( d ) {
if( d.is_valid ) {
this.submit();
} else {
// give some feedback to the user for validation failure
}
}
});
return false; // block the submit by default
});
From the docs ( http://api.jquery.com/die/ ) :
Note: In order for .die() to function correctly, the selector used
with it must match exactly the selector initially used with .live().
You need to use .unbind('submit')