We Keep Coding

Jquery code to show modal after form validation is done

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..

Jquery validator valid status with ajax submit

I am trying to post a form using ajax after a form has been validated. However the .valid seems to be wrong.
Multiple action type is desired based on button.
This example is also not showing the errors messages correctly upon submit
$('#submit').click( function(){
alert(validator.valid());
});
$('#submit2').click( function(){
alert(validator.valid());
//do something else
});
status become true if i enter a required field (e.g name)
this is the fiddle

try this fiddle
http://jsfiddle.net/r2HUu/4/
It's working. I just checked form' validation by $("#myForm").valid()

Quote OP:
"I am trying to post a form using ajax after a form has been validated"
As per documentation, your ajax goes inside the submitHandler callback function.
submitHandler (default: native form submit) Type: Function()Callback
for handling the actual submit when the form is valid. Gets the form
as the only argument. Replaces the default submit. The right place to
submit a form via Ajax after it validated.
Using this callback, the click is captured automatically and the function is only fired on a valid form.
$(function () {
var validator = $("#myForm").validate({
// rules and options,
submitHandler: function(form) {
// your ajax goes here
alert("valid form");
return false;
}
});
});
DEMO: http://jsfiddle.net/fXDwd/
Quote OP:
"However the .valid seems to be wrong."
EDIT
As per OP's comments and updated jsFiddle:
If you want to have multiple submit buttons do different things on one form, construct click handlers for each button which you've already done. Now you must move those buttons to outside of the <form></form> container. Otherwise, the plugin will treat them both as normal submit buttons and interfere with your click handlers.
The other problem is your implementation of .valid(). Attach it to the form element, $("#myForm"), not the validator initialization object.
HTML:
<form id="myForm" action="">
...
</form>
<input type="button" id="submit" value="Submit form" />
<input type="button" id="submit2" value="Submit form2" />
jQuery:
$(function () {
var validator = $("#myForm").validate({
// rules and options
});
$('#submit').click(function () {
alert($("#myForm").valid());
//do something
});
$('#submit2').click(function () {
alert($("#myForm").valid());
//do something else
});
});
DEMO: http://jsfiddle.net/vfrGU/

Preventing a form from submitting in jQuery Validate plugin's submitHandler function

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
}
});

changing input type submit to <a> tag which must work exactly as input>submit

I have a form that ends with
input type='submit'
That is used to submit the form and also trigger validation script.
Now I don't like this submit button. I want submit to be just an tag but with submit function to trigger validation normally.
Is there any way out of this problem ?

it's just like this:
Submit
or better:
Submit
<script type="text/javascript">
$(function(){
$('.submit').click(function(){
$(this).closest('form').submit();
});
});
</script>
note that this solutions requiore jQuery and will only work if javascript is enabled while the traditional submit-button works everytime.

I think something like this should work:
$('.anchor').click(function() {
$('#form').submit();
});

Trigger jQuery Validation Manually?

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 {
}
});