I'm trying to use these plugins to validate (bValidator) and submit my form (Form plugin), without success:
var myvalidator = $('#contForm').bValidator();
if(myvalidator.isValid()) {
$('#contForm').ajaxSubmit(function() {
alert("Thank you for your message!");
return false;
});
}
The validation part is ok, however the ajaxSubmit is not working...
Thanks in advance for your help! `
The easiest way to do this is:
$('#contForm').bValidator();
$('#contForm').ajaxForm(function() {
alert("Thank you for your message!");
});
.bValidator() must be called before .ajaxForm() to stop form submit if validation fails.
You can also do like this:
var myvalidator = $('#contForm').bValidator();
$('#contForm').submit(function(){
if(myvalidator.isValid()){
$(this).ajaxSubmit(function() {
alert("Thank you for your message!");
});
}
return false;
});
var myvalidator = $('#myForm').bValidator();
$('#myForm').submit(function()
{
//call ajax here
....
//disable submit post
return false;
});
Related
Here is the JS Fiddle
My Ajax code not working i dont know how..
I used ajax below code many time but this time not working
please help me..
only this code run inside the ajax code
if(!validateee()) return false;
If validation code remove then ajax run
Ajax Code
$('#body-enquiry').submit(function(e){
e.preventDefault();
if(!validateee()) return false;
$(this).find(":submit").prop("disabled", true);
var form = $(this);
var post_url = 'enquiry-entire-mail.php';
var post_data = form.serialize();
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(data) {
alert('Submited');
}
});
});
you forgot to return true at the end of your function that is the issue.
return true;
this you need to write in you validateee function .
please find update here : https://jsfiddle.net/qref356z/6/
you updated validateee function, update below code it will work i checked it at my end
function validateee() {
var name = document.popbody.namebody.value;
var email = document.popbody.emailbody.value;
var number = document.popbody.numberbody.value.length;
var msg = document.popbody.msgbody.value.length;
alert('msg5');
if(name.trim() == "") {
alert("Please Fill Name");
document.popbody.namebody.focus();
return false;
}
alert('msg4');
if(name<3) {
alert("invalid Name");
document.popbody.namebody.focus();
return false;
}
alert('msg3');
if(email=="") {
alert("Enter Your Email");
document.popbody.emailbody.focus();
return false;
}
alert('msg2');
if(number=="") {
alert("Enter Your Number");
document.popbody.numberbody.focus();
return false;
}
alert('msg1');
if(number<9) {
alert("Your Mobile number at least 10 digit");
document.popbody.numberbody.focus();
return false;
}
alert('msg');
if(msg == "") {
alert("Enter your Message");
document.popbody.msgbody.focus();
return false;
}
return true;///you need to add here
}
this delete working but edit doesn't where I am wrong?
jQuery.extend(jQuery.jgrid.del, {
serializeDelData: function (postdata) {
console.log("test");
return postdata;
}
});
jQuery.extend(jQuery.jgrid.edit, {
serializeEditData: function (postdata) {
console.log("edit");
return postdata;
}
});
Probably you inline editing (inlineNav for example and other) instead of form editing? serializeEditData works only with the form editing.
You can pass extra data with inline editing using serializeRowData event of grid.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow
serializeRowData: function (postData) {
return $.extend(true, {}, postData, {
account: jQuery('input[name=account]').val(),
code: jQuery('input[name=code]').val()
});
I have set up a form where the user can comment by entering their name, email and comment.
I want to run a validation on the input once the user leaves the #name field, but I can't get it to work please help.
$(document).ready(function() {
$('#name').on("change", function () {
var name = $('input[name=name]');
if (name.val()=='') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});
$('#name').focusout(function() {
//code
});
if you want it to trigger on leave than you can use:
$('#name').blur(function() {
//your code
}
Refer here: http://api.jquery.com/blur/
if you want to trigger on change than:
$('#name').change(function() {
//your code
}
Refer here:http://api.jquery.com/change/
You can use focusout instead of change
$(document).ready(function () {
$('#name').focusout(function () {
var name = $('input[name=name]');
if (name.val() == '') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});
I want to validate my course name field if the course name inputted already exist using AJAX, but my ajax function always return the alert('Already exist') even if i inputted data that not yet in the database. Please help. Here is my code. Thanks.
View:
<script type="text/javascript">
var typingTimer;
var doneTypingInterval = 3000;
$('#course_name').keyup(function(){
typingTimer = setTimeout(check_course_name_exist, doneTypingInterval);
});
$('#course_name').keydown(function(){
clearTimeout(typingTimer);
});
function check_course_name_exist()
{
var course_name=$("#course_name").val();
var postData= {
'course_name':course_name
};
$.ajax({
type: "POST",
url: "<?php echo base_url();?>/courses/check_course_name_existence",
data: postData,
success: function(msg)
{
if(msg == 0)
{
alert('Already Exist!');
return false;
}
else
{
alert('Available');
return false;
}
return false;
}
});
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
}
</script>
Controller:
function check_course_name_existence()
{
$course_name = $this->input->post('course_name');
$result = $this->course_booking_model->check_course_name_exist($course_name);
if ($result)
{
return true;
}
else
{
return false;
}
}
Model:
function check_course_name_exist($course_name)
{
$this->db->where("course_name",$course_name);
$query=$this->db->get("courses");
if($query->num_rows()>0)
{
return true;
}
else
{
return false;
}
}
You could use console.log() function from firebug. This way you will know exactly what the ajax returns. Example:
success: function(msg) {
console.log(msg);
}
This way you also know the type of the result variable.
jQuery, and Javascript generally, does not have access to the Boolean values that the PHP functions are returning. So either they return TRUE or FALSE does not make any difference for the JS part of your code.
You should try to echo something in your controller and then make your Javascript comparison based on that value.
i want to redirect form after ( success ) to another page. i use this code
$(document).ready(function(){
$("#ajax-form").submit(function(){
$.post(
"ajaxContact/ajax-register.php",
$("#ajax-form").serialize(),
function(data){
if (data.success)
$("span#ajax-message").css({'color':'green'});
window.location("index.html");
else
$("span#ajax-message").css({'color':'red'});
$("span#ajax-message").html(data.message);
},
"json"
);
return false;
});
});
how to redirect.
Regards
If you want to just redirect the page there, this should work:
if(data.success)
window.location = "url";
Updated:
$(document).ready(function()
{
$("#ajax-form").submit(function()
{
$.post("ajaxContact/ajax-register.php", $("#ajax-form").serialize(),
function(data)
{
if (data.success)
{
//If successful...
window.location = 'http://www.google.com';
}
else
{
//If unsuccessful...
alert("Post was unsuccessful.");
}
},"json");
return false;
});
});
That should work for you as long as your post is returning successfully. Here's a demo using a confirm to imitate your Post:
Demo here
window.location = "http://www.google.com";