Just wondering if you can try and assist.
I have a register form in WordPress that is being posted to a user database. I also need to pass the same form information to a webhook (Zapier).
I understand you cannot have 2 form action's for one form however I ideally need to find the best way of submitting both sets of information; one to the database and one to the webhook link.
An example of my code posting to my database. I need this to also post to
https://zapier.com/examplehook/
<form name="register_form" id="register_form<?php $template->the_instance(); ?>" action="$template->the_action_url( 'save-register' ); ?>" method="post”>
I was thinking of possibly using an onclick event to run a javascript function that also does a simultaneous form action. I'm confused if that would work though.
//edited code
$('#registerform').validate({ // initialize the plugin
rules: {
first_name: {
required: true
},
last_name: {
required: true
},
user_email: {
required: true,
email: true
},
user_login: {
required: true
},
hear_about_us: {
required: true
},
contact_number: {
required: true
},
address:{
required: true
},
post_code: {
required: true
}
},
submitHandler: function (form) {
$('#registerform').on('submit', function(event) {
event.preventDefault();
var xhr1 = $(this).ajaxSubmit({url: 'https://zapier.com/example-hook/'}).data('jqxhr');
var xhr2 = $(this).ajaxSubmit({url: '/register/'}).data('jqxhr');
$.when(xhr1, xhr2).then(function() {
window.location.replace("/register-step2/");
}, function() {
// error occured
});
});
}
});
Any suggestions would be ideal!
Thanks
You can use Jquery Form Plugin for this:
$('form').on('submit', function(event) {
event.preventDefault();
var xhr1 = $(this).ajaxSubmit({url: 'http://firsturl'}).data('jqxhr');
var xhr2 = $(this).ajaxSubmit({url: 'http://secondurl'}).data('jqxhr');
$.when(xhr1, xhr2).then(function() {
// both submits succeeded, redirect
}, function() {
// error occured
});
});
Related
I'm using the JQuery Validation fine but I need to somehow re-validate a field. I have a text field that has a remote aspect and that works fine. However, there is a select box above it that may change. I just want the validation to happen again if the value of the select box changes. Is that possible?
$('#input').validate(
{
rules: {
dbname: {
required: true,
minlength: 1,
onKeyUp: false,
remote: {
type:"post",
url:'createdb/checkdbname',
data: {
catserver: function(){
return $("#catserver").val();
},
prepend: function(){
return $("#prepend").text();
}
}
}
},
dataname: {
required: true
},
clientsel: {
required: true
}
},
messages: {
dbname: {
remote: "Database Already Exists on Server"
}
},
Basically the select box catserver and dbname kinda depend on each other. I'm not sure if i'm handling this correctly. I'm using bootstrap for the form with codeigniter if that matters. Basically what happens is after I validate fine and someone changes the select value of catserver the validation of the dbname doesn't happen again unless I change the value of the dbname field.
Sure, you can bind the change event to the element that should trigger your validation:
$('.my-select-box').on('change', validate);
function validate() {
$('#input').validate(
{
rules: {
dbname: {
required: true,
minlength: 1,
onKeyUp: false,
remote: {
type:"post",
url:'createdb/checkdbname',
data: {
catserver: function(){
return $("#catserver").val();
},
prepend: function(){
return $("#prepend").text();
}
}
}
},
dataname: {
required: true
},
clientsel: {
required: true
}
},
messages: {
dbname: {
remote: "Database Already Exists on Server"
}
},
// .......
}
I'm using some jQuery to do some form validation. The following is the validation script.
$(document).ready(function() {
$('#contact-form').validate({
rules: {
cf_name: {
minlength: 2,
required: true
},
cf_email: {
required: true,
email: true
},
phone: {
minlength: 10,
required: true
},
user_pass: {
minlength: 2,
required: true
},
validateSelect: {
required: true
},
validateCheckbox: {
required: true,
minlength: 2
},
validateRadio: {
required: true
}
},
focusCleanup: false,
highlight: function(label) {
$(label).closest('.control-group').removeClass('success').addClass('error');
},
success: function(label) {
label
//.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
},
errorPlacement: function(error, element) {
error.appendTo(element.parents('.controls'));
}
});
$('.form').eq(0).find('input').eq(0).focus();
}); // end document.ready
On my submit button, I have this code:
<input type="submit" value="SUBMIT" id="sub" class="sub_text">
I'd like to make it so that when a user clicks the submit button and the form validates before it does any fading/transitioning, that it does within this code:
$("#sub").click(function(){
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
});
But my problem is that if a user forgets a field and then hits submit, the overlay transition happens. I'd like it to only happen when there's a
success of validation.
How am I able to trigger the event only when it's validated?
Have you tried calling form.valid() as follows:
$("#sub").click(function(){
if($('#contact-form').valid()){
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
}
});
.valid() checks whether given form is valid or not.
You are using the wrong hook. You are attaching your fadein code into "click" event of the button, means just when the user clicks the button you will execute the fadein.
Solution? quite simple, just have a look at the jqueryvalidation doc (http://jqueryvalidation.org/validate), instead of fadein in click event of the button, just do it in the validation hook.
$('#contact-form').validate({
submitHandler: function(form) {
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
// do other things for a valid form
form.submit();
}
});
I would like to prevent submission if form is not valid and to print some error message if possible, here's what I have so far:
btw "link to the current page" is defined in php
hbspt.forms.create({
css: '',
portalId: 'hs-portal-id-goes-here',
formId: 'hs-form-id-goes-here',
onFormReady: function(){
jQuery('#hsForm_hs-form-id-goes-here').validate({
errorPlacement: function(error, element) {},
rules: {
firstname: { required: true },
lastname: { required: true },
email: { required: true },
message: { required: true }
},
submitHandler: function(form, e) {
e.preventDefault();
window.open('link to the current page', '_self');
form.submit();
jQuery(newForm)
var newForm = jQuery('#hsForm_hs-form-id-goes-here');
window.setTimeout(function() {
newForm.html('<h3>Thank you for submitting the form</h3>');
}, 1000);
}
});
}
});
Do you want client-side or server-side validation?
If answer is client-side, you should do it with javascript, check inputs and write validation messages.
If it is server-side, you should consider using ajax, serialize your form, send it to server, and react depending on answer (was data successfully validated, or not)
Hi I'm doing a validation form. I use codeigniter so I do of course a first validation with php.
I have a .js file to validate the form too. The thing is that some changes were made and now the file is no longer working properly.
When a field passes validation, a green icon appears next to the field. When it doesn't then the input box appears in red.
A field that is not working is documentn. I made a function to check if the document is already on the database. It worked on the past, now I can't figure out why is not working.
This is a snippet from the file:
form2.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
onfocusout: function (element) {
$(element).valid();
},
rules: {
documentn: {
required: true,
minlength: 7,
maxlength: 20,
digits: true,
remote: {
url: '/checkDocNumber',
type: 'POST',
data: {
documentn: function(){
var dn = $('#documentn').val();
$("#documentn").removeData("previousValue");
return dn;
}
}
}
},
this is snippet from my admin.php:
public function updateFrontUser(){
$result = array();
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->load->database();
$this->form_validation->set_rules('documentn', 'Nro de Documento', 'required|min_length[7]|max_length[20]|is_natural');
this is function to check if document already exists on the database:
public function checkDocNumber(){
if (isset($_POST['documentn'])){
$dn = UserManager::getInstance()->getByDocument($_POST['documentn']);
if ($dn){
echo "true";
}else{
echo "false";
}
}
}
how can I check if data from remote rule is being passed to my checkDocNumber function?
EDIT
when I do a browser inspection no error appears!
Problem Solved. Just changed url from checkDocNumber to /admin/checkDocNumber
Still can't understand why it worked before with url being just checkDocNumber.
documentn: {
required: true,
minlength: 7,
maxlength: 20,
digits: true,
remote: {
url: '/admin/checkDocNumber',
type: 'POST',
data: {
documentn: function(){
var dn = $('#documentn').val();
$("#documentn").removeData("previousValue");
return dn;
}
}
}
},
I'm new to jQuery.
Working with jQuery validation plugin & cufon at the same time is giving me really hard time.
Basically, I want to detect event once jQuery Validation did what it had to do and call Cufon.refresh() straight after it.
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
},
}
});
We are expecting <label class="error"> SOME TEXT </label> when form is not valid.
And once that created I want to Cufon.refresh() on that label created by jQuery Validation.
How can I detect when jQuery Validation is done, and call something based on that event?
Any help much appreciated.
Regards,
Piotr
Thanks to #Ariel - if there is a 'success' there has to be a 'not-success' as well, so..
Working code:
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
}
},
showErrors: function(errorMap, errorList) {
this.defaultShowErrors();
Cufon.refresh();
//alert('not valid!')
},
success: function() {
//alert('valid!')
}
});
Thanks again for the idea!
Use the success option:
$('#commentForm').validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 8,
number: true
},
}
success: function() { .... }
});
Note that you have an extra comma after the close brace for the password object. This will give an error in IE.
<script src="js/validate/jquery-1.11.1.min.js"></script>
<script src="js/validate/jquery.validate.min.js"></script>
<script src="js/validate/additional-methods.min.js"></script>
<script>
jQuery.validator.setDefaults({
success: "valid"
});
var form = $("#myform");
form.validate({
rules: {
name: {required: true, minlength: 2},
lastname: {required: true, minlength: 2}
}
});
$("#button").click(function() {
if(form.valid() == true ) { // here you check if validation returned true or false
$("body").addClass("loading");
}
})
</script>
submitHandler: { function(){ bla bla }}
This will allow you to execute code upon the completion of the validate. you will need to place a submit form snippet though, since it replaces the default handler.
EDIT:
// specifying a submitHandler prevents the default submit
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
You can use either to do what you want. submitHandler allows you to stop the submit and execute code instead ( you can possibly use it to perform code BEFORE you submit it ) or success to execute code after the submit.
Put it inside the errorPlacement option.
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
yourCodeHere();
}
$(document).ready(function() {
$('#commentForm').submit(function(){
var validationResponse = $('#commentForm').valid();
if(validationResponse) {
// when true, your logic
} else {
// when false, your logic
return false;
}
});
$("#commentForm" ).validate({
rules: {
"first_name": {
required: true
}
},
messages: {
"first_name": {
required: "First Name can not be empty"
}
}
});
});