I have a form which is validated using the jQuery validation plugin. I added the bootstrap confirmation on the submit button. Everything is working fine, except that I want the bootstrap confirmation to appear on the submit button when the form no longer has any errors.
I've tried doing this:
HTML code:
<button type="submit" class="btn" id="submit_button" data-toggle="confirmation"data-popout="true">Submit</button>
jQuery code:
$("#submit_button").on('click', function(){
if($('#form').valid()) {
$(this).trigger("confirmation");
}
});
But it didn't do anything. Should I use the submitHandler in jQuery validation? Or is this not just possible?
Should I use the submitHandler in jQuery validation?
YES, of course.
Use the submitHandler for this. As per documentation, it fires only when the form is valid, so there's no need to test the form's validity or use another click handler.
$('#form').validate({
// options, etc.
submitHandler: function(form) { // fires when valid (and on button click)
$("#selector").trigger("confirmation");
}
});
Related
I have a form that I want to use jquery for validation of the form before I submit. If I click on one of the buttons, I have it save the data via an ajax call. For the other button I want to submit the form, but not have it go through ajax, just do a submit the old fashioned way and go to that page.
I had the submitHandler in my validate() function, which works great for doing the ajax stuff, but what about for the other button where I don't want to use ajax? Do I remove the submitHandler portion from the validate() function? If so, then how should I set up for using ajax? Do I put it in the event handler for the click on that button? If so, how should I set it up?
Can't you just create 2 different functions or just one parameterized with a boolean to indicate whether to send ajax request or just submit the form? the latter may be done using the JQuery submit function.
I think the best way is to bind a personal event
$('form').on('submitajax submit', function(e){
if(e.type === 'submitajax'){
//ajaxstuff
}
else{
//classic stuff
}
})
And your ajax button will trigger the submitajax event
Your validation function can be like this:
function bar( ajax )
{
var valid = true, fooForm = $('#fooForm');
// do validation stuff
if( !valid ) return;
if( ajax ){
$.post(fooForm.attr('action'), fooForm.serialize());
}else{
fooForm.submit();
}
}
And your buttons:
<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />
You need check JavaScript events on submitting form.
Just consider form:
<form class="js-form">
<a class="js-save">Save</a>
<input type="submit" value="Submit"/>
</form>
$('.js-from').on('click', function(event){
if (event.target === event.currentTarget){
# Triggers on click submit input that triggers as part of form and target same
# Call ajax stuff
} else {
# Triggers on click link witch is fired as click as not a part of form
# Call other ajax or link stuff
}
});
One function for cheching if form submit on submit button or link that can do any thing other
I figured it out. In my ajax button click event handlers, I needed to add
event.preventDefault();
Then I could add the $.ajax() call to the one where I wanted to call ajax, and to the other one just did the submit normally.
Thank you for all of your responses, it was an interesting exercise and I learned a bit more about the intricacies of this type of coding.
I'm trying to submit a form by clicking on a link. I disabled the redirection, but for some reason .submit() is not working...
Here is what I have tried:
Effect: redirection stops, no form submission, no error message, stuck on the form page:
$('.jsubmit').click( function(e) {
e.preventDefault();
$('form#fadmin').submit();
});
Effect: URL redirection, form not submitted, no error message
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
});
Effect: redirection stops, no form submission, no error message, stuck on form page:
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
return false;
});
The form:
<form action="" method="post" name="fadmin" class="inputform" id="fadmin">...</form>
And a bunch of other combination including trigger(), reversing the preventDefault() with unbind(). The only way I was able to submit the form was to trigger a click on the submit button but that is not really a solution in my case, because I need to use this on multiple pages and adding the button then hiding it is not something I would like to do on every page...
I have tried to run them in Firefox and IE with the same result.
Some other JS, jQ codes being used are: default bootstrap and respond provided by ZendFramework2 and ZFTables.
Any help would be much appreciated!
EDIT:
The form had the following submit button:
<input id="mysubmit" type="submit" value="Register" name="submit" />
After removing this my first example above worked perfectly.
Strange because there was no other forms or submit buttons on the page and nothing with the same name, id, type...
The issue is probably that you are trying to call submit() on a jQuery object, not the form DOM element.
Try this as your second line of code:
$('form#fadmin')[0].submit();
As an exercise I have added some parsley validation to this form here
http://matthewpiatetsky.com/cs401/login.html
I am now trying to add a similar validation to the form here
http://matthewpiatetsky.com/cs401/writereviews.html
(I have some mouseout validation on the text area)
I am running into two issues:
How can I get the form to validate before the form submits to its action? Can I run validation first, and if validation succeeds, then submit the form.
How can I add data-required="true" to the jquery raty stars to force the user to fill those in?
Thanks!
For validation before submit you can do something like:
var form = document.getElementById(“yourFormID”);
form.addEventListener("submit", function(event) {
// do your additional validation here
if (something wrong)
event.preventDefault();
}, false);
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/
I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.
What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.
$(document).ready(function(){
$('#submit').click(function() {
$('#suzuki_scb').submit();
});
$('#suzuki_scb').validate({
submitHandler: function(form) {
form.submit();
}
});
});
Even this doesn't work and returns form.submit() is not a function.
I think this is what you're trying to accomplish
<script type="text/javascript>
$(document).ready( function(){
$('#suzuki_scb').validate({
// validation arguments go here
});
});
</script>
...
<form id="suzuki_scb">
<!-- Your form goes here -->
<button id="submit">
<img src="[image url goes here]" />
</button>
</form>
From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won't actually submit the form.
Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form
This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:
This method sets up event handlers for
submit, focus, keyup, blur and click
to trigger validation of the entire
form or individual elements.
Hope it helps.