I have to submit a form inside the Ajax.
I'm receiving 'form.submit is not a function' JQuery error.
$("#form").validate({
// Specify the validation rules
rules: {
type: "required",
groups: {
required: true
}
},
// Specify the validation error messages
messages: {
type: "Type is required",
groups: {
required: "Group is required"
}
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "check_exists.php",
data: {
groups: $( "#groups" ).val(),
type: $( "#type" ).val()
},
success: function(data) {
if(data == "true") {
form.submit(); // It shows form.submit is not a function
} else {
// Displays error
}
}
});
}
});
When I give the form.submit() function above the Ajax, It works!
Then how do I submit this form inside the Ajax success function?
Hey u can use the arrow function feature here
$("#form").validate({
// Specify the validation rules
rules: {
type: "required",
groups: {
required: true
}
},
// Specify the validation error messages
messages: {
type: "Type is required",
groups: {
required: "Group is required"
}
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "check_exists.php",
data: {
groups: $( "#groups" ).val(),
type: $( "#type" ).val()
},
success: (data) => {
if(data == "true") {
form.submit();
} else {
// Displays error
}
}
});
}
});
It will bind the context of the callback function to submitHandler function
try changing the scope of the form variable:
var form_to_be_submitted = null;
$("#form").validate({
// Specify the validation rules
rules: {
type: "required",
groups: {
required: true
}
},
// Specify the validation error messages
messages: {
type: "Type is required",
groups: {
required: "Group is required"
}
},
submitHandler: function(form) {
form_to_be_submitted = form;
$.ajax({
type: "POST",
url: "check_exists.php",
data: {
groups: $( "#groups" ).val(),
type: $( "#type" ).val()
},
success: function(data) {
if(data == "true") {
form_to_be_submitted.submit(); // It shows form.submit is not a function
} else {
// Displays error
}
}
});
}
});
Related
Here I am using jQuery validation. It is working fine, after fill all form fields I want do Ajax call but I am not able to do that. I am getting error. How can I do?
jQuery(document).ready(function(){
jQuery("#SubmitForm").validate({
rules: {
"address": {
required: true
},
"username": {
required: true
},
"mobileNumber": {
required: true,
number: true,
minlength : 12
},
"userEmailid": {
required: true,
email: true
},
"message": {
required: true
}
},
messages: {
"address": {
required: "Please enter your Location."
},
"username": {
required: "Please enter your Fullname."
},
"mobileNumber": {
required: "Please enter your Mobile Number."
},
"userEmailid": {
required: "Please enter your Email.",
email: "Please enter valid Email."
},
"message": {
required: "Please enter Message."
}
},
/* jQuery.ajax({
type:'POST',
url :"php/submit_hitachiForm.php",
data: jQuery('form#SubmitForm').serialize(),
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
if(data == "success"){
$("#success_message").show();
$("#success_message").fadeOut(4000);
}
},
error:function(exception){
alert('Exeption:'+exception);
}
}); */
});
});
Put all the validation:
$('#SubmitForm).validate({
// validation rules
});
and after that initialize the validation function like:
if($('#SubmitForm).valid())
{
// make ajax() call here
}
Try this in your code
submitHandler: function() {
/*ajax request*/
}
Why validation is not working in this script ?
I gave blank input but it is not giving the required messsage and also regx is not working.
$(document).ready(function(){
var $form = $(this);
$.validator.addMethod("regx", function(value, element, regexpr) {
return regexpr.test(value);
}, "Please enter a valid Pan number.");
$("#checkval").validate({ //here is form id #checkval
showErrors: function(errorMap, errorList) {
for (var error in errorMap) {
$.growl.error({ message: errorMap[error] });
}
},
onkeyup: false,
rules: {
oldemail: {
required: true,
regx: /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/
},
newemail: {
required: true,
regx: /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/
}
},
messages: {
oldemail: {
required: "Please enter old e-mail ",
regx: "Please enter your valid e-mail address"
},
newemail: {
required: "Please enter new e-mail ",
regx: "Please enter your valid e-mail address"
}
},
// From here started ajax code.
submitHandler: function(form) {
$.ajax({
url: index.php?act=account,
type: "POST",
data: $(form).serialize(),
success: function(response) {
alert(response);
$('#inquiryFormHolder').html("Your form was submitted!");
// here is div id #inquiryFormHolder
}
});
$form.submit();
}
});
});
I have a form where I have several javascript/jquery functions that are working fine. As soon as I add a validate function they all stop working. I am using the plugin from http://jqueryvalidation.org/ and have all my functions in one js file. Again all these functions work fine until I add the validation function. Here is the js file.
$(function(){
$(".timeinput").timepicker({
step: 5
});
});
$(function(){
$(".datepick").datepicker({
changeYear: true,
changeMonth: true
});
});
$(function(){
$("#incimechtype").change(function(){
var dropdown = $(this).val();
$.ajax({
url:"getinjuryjson.php",
dataType: "json"
}).done( function(data){
$("#incimech").find("option").remove();
if(dropdown !== ""){
$("#incimech").append($('<option/>'));
}
switch(dropdown){
case "Mechanism":
$.each(data, function(key,value){
if(value.injmech==='Mechanism'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
case "Other":
$.each(data, function(key,value){
if(value.injmech==='Other'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
case "Object":
$.each(data, function(key,value){
if(value.injmech==='Object'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
}
}
)
}
)
}
);
$("#referto").change(function(){
var rechange = false;
$('#referto option:selected').each(function(){
if($(this).text()=="Other"){
rechange =true;
}
});
if(rechange){
var textarea = "<textarea name='referother' id='referother' />";
$("#referto").after(textarea);
}
else
{
$("#referother").remove();
}
});
$(function(){
$("#classcase").change(function(){
var dropdown = $(this).val();
$.ajax({
url:"getoshaclassson.php",
dataType: "json"
}).done( function(data){
$("#otherrecord").find("option").remove();
if(dropdown !== ""){
$("#otherrecord").append($('<option/>'));
}
if(dropdown ==="Other Recordable"){
$.each(data, function(key,value){
if(value.oshaclassid > 3){
$("#otherrecord").append($('<option/>',{
value: value.oshaclassid,
text: value.oshaclass
}));
}
});
}
}
)
}
)
}
);
$(function(){
$("#addlostdays").click(function(){
$("#oshadataarea").find("label").remove();
$("#oshadataarea").find("input").remove();
$("#oshadataarea").find("textarea").remove();
$("#oshadataarea").find("br").remove();
$("#oshadataarea").append($('<label/>',{
text:"Begin Lost Date",
for: "newloststartdate",
class: "eighth"})).append($('<input/>',{
type: "text",
id: "newloststartdate",
name: "newloststartdate",
class:"datepick"
})).append($('<label/>',{
text:"End Lost Date",
for: "newlostenddate",
class: "eighth"})).append($('<input/>',{
type: "text",
id: "newlostenddate",
name: "newlostenddate",
class:"datepick"
}))
});
$('form').on('focus',".datepick", function(){
$(this).datepicker({
changeMonth: true,
changeYear: true
});
});
});
$(function(){
$("#addjobtrans").click(function(){
$("#oshadataarea").find("label").remove();
$("#oshadataarea").find("input").remove();
$("#oshadataarea").find("textarea").remove();
$("#oshadataarea").find("br").remove();
$("#oshadataarea").append($('<label/>',{
text:"Begin Light Duty",
for: "newlightstartdate",
class: "eighth"})).append($('<input/>',{
type: "text",
id: "newlightstartdate",
name: "newlightstartdate",
class:"datepick"
})).append($('<label/>',{
text:"End Light Duty",
for: "newlightenddate",
class: "eighth"})).append($('<input/>',{
type: "text",
id: "newlightenddate",
name: "newlightenddate",
class:"datepick"
}))
});
$('form').on('focus',".datepick", function(){
$(this).datepicker({
changeMonth: true,
changeYear: true
});
});
});
$(function(){
$("#addemphealthcomments").click(function(){
$("#oshadataarea").find("label").remove();
$("#oshadataarea").find("input").remove();
$("#oshadataarea").find("textarea").remove();
$("#oshadataarea").find("br").remove();
$("#oshadataarea").append($('<label/>',{
text:"Employee Comment Date",
for: "newemplcomdate",
class: "eighth"})).append($('<input/>',{
type: "text",
id: "newemplcomdate",
name: "newemplcomdate",
class:"datepick"
})).append($('<br />')).append($('<label/>',{
text:"Employee Comments",
for: "newemplincidomments",
class: "eighth"})).append($('<textarea/>',{
cols: "50",
rows: "5",
id: "newemplincidomments",
name: "newemplincidomments"
}))
});
});
As soon as I add this below function every other function stops working.
$function(){
$("#incidentform").validate({
rules: {
incidate: "required"
},
messages: {
incidate: "Please enter the incident date."
}
})
}
I must be doing something wrong. I am pretty much a neophyte when it comes to jquery as I have only been using it for a month. Hope someone can help.
$(function(){
$("#incidentform").validate({
rules: {
incidate: "required"
},
messages: {
incidate: "Please enter the incident date."
}
})
});
Missing brackets around it.
Example: http://jqueryvalidation.org/files/demo/custom-methods-demo.html.
The code:
validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
rules: {
number: {
required:true,
minlength:3,
maxlength:15,
number:true
},
secret: "buga",
math: {
equal: 11
}
}
});
Question:
Is there a method that will ONLY fire if a field being validated actually fails to validate? errorPlacement above fires for every fields, regardless of validation result.
Thanks.
Here's what worked for me:
$('#invite').validate({
invalidHandler: function(event, validator) {
if (validator.numberOfInvalids()) {
for (i in validator.errorList) {
error = validator.errorList[i];
if (typeof error['element'] === 'object') {
fGrp = $(error['element']).closest('.form-group');
fGrp.toggleClass('has-error', true);
fGrp.find('.validationErrorMessage').html(error.message).toggleClass('nodisplay', false);
}
}
}
},
errorPlacement: function(error, element) { // Do nothing
},
rules: {
email: {
required: true,
email: true,
remote: {
url: '/admin/isgmail/',
type: 'POST',
dataType: 'json',
data: {
email: function() {
return $('#email').val();
}
}
}
},
},
onkeyup: false,
onfocusout: false
});
email: {
required: true,
email: true,
remote: {
url: "/user/check_email",
type: "post",
data: {
email: function () {
return $("#email").val();
}
}
}
}
the server returns 1 or 0, but how in jQuery validator I can handle that result?
email: {
required: true,
email: true,
remote: {
url: "/user/check_email",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
},
success: function(msg) {
alert(msg);
}
}
}
I've found it, just add a success function...