php


Using a button outside a form to submit form and trigger jQuery validation


I'm using the jQuery validation plugin and the form uses ajax to submit the form. I have a floating button bar which generates the buttons for pages depending on what the page is used for. These buttons sit outside of the form tag. My form's id is account-settings. In my document.ready I have this:
$("#account-settings").validate({
rules: {
email: {email: true}
},
messages: {
email: {email: "Enter a valid email address."}
},
})
There's a button called savesettings which saves the settings for the form. Here's the click event:
$('#savesettings').click(function() {
if($('#account-settings').valid()){
alert("Valid form");
}
else{
alert("Not valid");
}
}
Nothing happens when I click the button... so, basically, I'm obviously not using the plugin right, somebody enlighten me? Keep reading over the documentation but I don't see anything else...
You will need to serialize the form upon the user clicking the button something like..
$('#savesettings').click(function() {
var $as = $('#account-settings');
if($as.valid()){
$.post(
/* your server page */
, $as.serialize()
, /* your callback function */
);
}
else{
alert("Not valid");
}
});
I should point out the obvious accessibility pitfall with submitting a form this way where users with no JavaScript will not be able to use it.
If you want to submit a form using any button outside of that form, you should use the trigger() function like so:
$('body').on('click', '#my-button', function(){
$('#account-settings').trigger('submit');
});
Your validation plugin should then act as normal.
Your JS function could use a closing paren. Try something like:
$('#savesettings').click(function() {
if($('#account-settings').valid()){
alert("Valid form");
} else {
alert("Not valid");
}
});

Related Links

How can I update all rows except the last one?
PHP - same things different output( if else )
custom session_handler broken with php7 (session_set_save_handler)
When I try to show an uploaded image html shows me another one but if I refresh the page it shows me the right one
FFmpeg on Windows - Background converting
<textarea> not properly POSTING information
PHP Number Ticket System?
WooCommerce actions - hook names
simple php pagination or css pagination with php/mysql
How to pass array back to PHP using Ajax [duplicate]
Sonata admin - custom menu item roles
Group arrays by key value
How to integrate nodejs in codeigniter
PHP check website online or offline issue
Website organization - PHP [duplicate]
Set 404 Error Template Different for modules zend framework 2

Categories

HOME
elasticsearch
vagrant
couchdb
dry
code-formatting
nsview
vsts-build
google-play-services
dronekit-python
mathematical-optimization
iptables
capistrano
minecraft
reportviewer
clish
createjs
amazon-elb
squirrel-sql
dhcp
sql-injection
async-await
fresco
rest-assured
raml
spyder
error-logging
unity-container
sqlplus
el
kaggle
liferay-6.2
web-config-transform
password-generator
multi-dimensional-scaling
npoi
winsock
delayed-job
mongoengine
ms-media-foundation
buildforge
djcelery
cloudera-quickstart-vm
gitolite
assemblies
best-buy-api
access-denied
ipp-protocol
common-table-expression
rightnow-crm
spring.net
wikimapia
dex
polymaps
finder
gawk
petsc
s-function
tsqlt
qtcpsocket
piping
timestamping
vaadin4spring
polymerfire
persistent-object-store
as3-api
univocity
lovefield
android-mapview
in-app-billing
msgpack
largenumber
apache-commons-digester
place
canopy
jnlp
featuretoggle
css-paged-media
tkx
createfile
cout
producer
redpitaya
incognito-mode
jack
nosql-aggregation
tnt4j
indesign-server
background-thread
system-information
uitextfielddelegate
hardcode
autosize
type-safety
fbml
mvcrecaptcha
dynamic-c
expression-web
radscheduler
asp.net-mvc-views
servlet-container
explicit
asdoc
self-tracking-entities
aspbutton
data-retrieval
watchpoint
parentid

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App