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

YII Server Move. Internal Server Error. CDbException
Having troubles posting form data with ajax to controller action (laravel)
Laravel 5.2 Unit Tests error: BadMethodCallException: Call to undefined method Illuminate\Database\Query\Builder::make()
Full-Text Search Function not working at all
WordPress settings page for custom methods
laravel get jobs from redis queue located in another codebase\project?
How to concatenate variable and string that contains () in php
Laravel mysql multiple operations with one DB instance
How to add form data to a bootstrap modal in the same page by using jQuery?
WP - How to get all the comment_post_ID in bulk comment approval
How to grab a random MYSQL Column Value using PHP and echo it?
Secure way to allow a specific PHP script to read/write a directory?
php searching empty fields in the db [duplicate]
PHP strtotime returns incorrect month [duplicate]
Listing out team members with select options
Restart foreach loop in PHP

Categories

HOME
openshift
keyboard
yaml
antd
website
cryptography
tibco
implicit-conversion
video-streaming
javafx-8
minecraft
azure-logic-apps
hystrix
lc3
tiff
android-externalstorage
smartgwt
bundler
pinterest
exe
mixpanel
cocos2d-android
bazaar
altium-designer
unrar
ruby-daemons
echosign
tortoisehg
django-import-export
spring-annotations
jsonresult
substance
fotorama
appcode
gsp
counting
des
formsauthenticationticket
unification
cheat-engine
assemblies
ejml
apache-toree
bit-shift
nonlinear-functions
md5-file
google-news
gnome-terminal
business-rules
d3v4
researchkit
thread-exceptions
livereload
seccomp
android-4.2-jelly-bean
android-sdcard
apache-pig-grunt
node-glob
vaadin4spring
psd
management-studio-express
wepay
cortana
dsa
screen-orientation
auto-generate
unhandled
org-babel
subfolder
python-curses
signed
findersync
createfile
directorysearcher
string.format
osascript
communicate
treeline
stripe.net
jomsocial
infinite
acitree
insertion
oscilloscope
ofstream
xmlwriter
xalan
xcode4.5
thejit
first-class
kaazing
jzmq
flymake
prototypal-inheritance
type-safety
boost-foreach
groovy-console
data-dump
representation
3des
explicit
mysqli-multi-query
html-components
server-load
gui-designer

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