JQuery Ajax Submit Function add validation - javascript

I am using this code:
function submitForm() {
$.ajax({type:'POST',
url: 'index.php',
data:$('#ContactForm').serialize(),
success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}}
);
return false;
}
It works well but how do I go about adding a validation for example ... to alert if username or password is empty?
I know there's a lot of these similar scripts around but want to add it to this one in particular.

Use beforeSend()
function submitForm() {
$.ajax({type:'POST',
url: 'index.php',
data:$('#ContactForm').serialize(),
success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}},
beforeSend: function(){
if(!$("#name").val()){
alert("name field is empty.");
return false;
}
}
);
return false;
}

function submitForm() {
if(!$("#name").val()){
alert("name field is empty.");
return false;
}
$.ajax({type:'POST',
url: 'index.php',
data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}

you have to perform validation before the ajax calling statement
for example
function submitForm() {
var username=$('#id').value;
if(username!='')
{
$.ajax({type:'POST',
url: 'index.php',
data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
}
else
{
alert("Please Enter Username");
}
return false;
}

You might want to do something like this
function submitForm() {
if (inputIsValid()) {
sendAjaxRequest();
} else {
ShowMessage();
}
}
function sendAjaxRequest(parameters) {
$.ajax({
type: 'POST',
url: 'index.php',
data: $('#ContactForm').serialize(),
success: function (response) {
$('#ContactForm').find('.form_result').html(response);
}
});
}
function inputIsValid() {
return $("#username").val() && $("#password").val();
}
function ShowMessage() {
alert("Please provide username and password");
}

Use this link for reference http://jsfiddle.net/RH8Dy/ to view the example or below given Script
function submit()
{
var username = document.getElementById("txtusername").value;
var password = document.getElementById("txtpassword").value;
if(username == "")
{
alert("enter username");
}
if(username == "")
{
alert("enter username");
}
else if(password == "")
{
alert("Enter Password");
}
else
{
//ajax call
}
}

Related

How to check ajax/php response async? [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 10 months ago.
this code doesn't work, because it always return undefined. In my opinion the "success" from the ajax should return, if the result is there.
How to make sure, that the boolean will be returned?
<script>
$('#sbtn').on("click", function(e) {
e.preventDefault();
// if user exists, set validated to true
var validated = checkUser('requestedUser');
// if the user is validated, submit form
if(validated) {
//alert("Thank You");
$('#setup').submit();
}
}
function checkUser(user) {
data = {
lernsax_email: user
}
$.ajax({
type: "POST",
url: "checkuser.php",
data: data,
success: function(msg){
if(msg === "passed") {
// php returns "passed", if the user can be found
console.log(msg);
return true;
} else {
console.log(msg);
return false;
}
},
});
}
</script>
you can use Promise
<script>
$('#sbtn').on("click", function(e) {
e.preventDefault();
// if user exists, set validated to true
let result = checkUser('requestedUser');
result.then(validated => {
if(validated) {
//alert("Thank You");
$('#setup').submit();
}
});
}
function checkUser(user) {
data = {
lernsax_email: user
}
return new Promise(resolve => {
$.ajax({
type: "POST",
url: "checkuser.php",
data: data,
success: function(msg){
if(msg === "passed") {
// php returns "passed", if the user can be found
console.log(msg);
resolve(true);
} else {
console.log(msg);
resolve(false);
}
},
});
});
}
</script>
or move
if(validated) {
//alert("Thank You");
$('#setup').submit();
}
to success funtion of ajax
<script>
$('#sbtn').on("click", function(e) {
e.preventDefault();
// if user exists, set validated to true
checkUser('requestedUser');
}
function checkUser(user) {
data = {
lernsax_email: user
}
$.ajax({
type: "POST",
url: "checkuser.php",
data: data,
success: function(msg){
if(msg === "passed") {
// php returns "passed", if the user can be found
console.log(msg);
$('#setup').submit();
return true;
} else {
console.log(msg);
return false;
}
},
});
}
</script>

Checking Recaptcha still sends a message if false

There was a problem connecting Google Recaptcha v2. Or rather with the form. The check works fine, the error message displays, but, the message is still sent.
How can I fix this?
This is a form of feedback:
$(document).ready(function() {
$("#fast-call_submit").bind("click", function(e) {
e.preventDefault();
var form = $('#feedback_form');
var fields = form.serialize();
$.ajax({
url: form.attr('action') + '.json',
type: 'post',
data: fields,
dataType: 'json',
complete: function() {},
success: function(response) {
var v = grecaptcha.getResponse();
if (v.length == 0) {
$('.w-form-re-fail').show();
return false;
} else {
if (response.status == 'ok') {
$('.w-form-done').show();
$('.w-form-fail').hide();
form.hide();
} else {
$('.w-form-fail').show();
}
$('.w-form-re-fail').hide();
return true;
}
}
});
});
});

Cordova unable to post data to server using ajax

I am developing a Phonegap Cordova application and I want to POST data to server using AJAX but am not able to, am getting an error.
My example code is:
<script>
$(document).ready(function()
{
$('#frm').submit(function()
{
var username = $('#textinput').val();
var username = $.trim(username);
var password = $('#passwordinput').val();
var password = $.trim(password);
{
alert('Please enter username');
return false;
}
else if(password =='')
{
alert('Please enter password');
return false;
}
else
{
var user = $('[name=username]').val();
var pass = $('[name=password]').val();
$.ajax({
type: 'POST',
url: 'http://eqfree***p.com/log_sb.php',
rossDomain: true,
beforeSend : function() {$.mobile.loading('show')},
complete : function() {$.mobile.loading('hide')},
data: { username:'user', password:'pass'},
dataType: 'json',
success: function(data){
alert(data.success);
alert('success');
},
error: function(){
alert('error!');
}
});
return false;
}
});
});
</script>
try this one
<script>
$(document).ready(function()
{
$('#frm').submit(function()
{
var username = $('#textinput').val();
var username = $.trim(username);
var password = $('#passwordinput').val();
var password = $.trim(password);
else if(username =='')//check condition
{
alert('Please enter username');
return false;
}
else if(password =='')
{
alert('Please enter password');
return false;
}
else
{
//no need to re initialize
//var user = $('[name=username]').val();
//var pass = $('[name=password]').val();
$.ajax({
type: 'POST',
url: 'http://eqfree***p.com/log_sb.php',
crossDomain: true,
beforeSend : function() {$.mobile.loading('show')},
complete : function() {$.mobile.loading('hide')},
data: { 'username':username, 'password':password},
dataType: 'json',
success: function(data){
alert(data.success);
alert('success');
},
error: function(){
alert('error!');
}
});
return false;
}
});
});
</script>

Ajax call function on success return false not working

I am running an ajax request, then once I get the result back I choose if it should be continued or if the form should not submit. I am checking if the email exists.
Issue is I moved the return false out of the success: as it was not working there and now in a seperate function it is not working either. I get the alert("FALSE"); but the form still submits which is no good as I want an error pop up to happen.
$.ajax({
type: "POST",
url: "/ajax/checkdata.php",
data: "email="+email,
success: function(data){
var returned = true;
if (data == "Email Exists") {
returned = false;
} else {
}
emailModal(returned);
}
})
function emailModal(result){
if (result) {
alert("TRUE");
} else {
alert("FALSE");
return false;
}
}
You'd have to always prevent the form from submitting, and then in the check for the email figure out wether to show an error or submit the form using the native submit handler
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/ajax/checkdata.php",
data: {email : email},
context: this
}).done(function(data) {
if (data == "Email Exists") {
alert(data);
} else {
this.submit();
}
});
});

how to validate a same form in different button click using jquery

edit-txt,updatePassword are two buttons in a single form superAdminDetailsForm . i want to valide this form in both button click. I wrote form validation on each button click .but it doesn't work. edit-txt button is type of text and update password is type of button
$().ready(function() {$('#edit-txt').on('click', function() {
$("#superAdminDetailsForm").validate({
rules: {
superadminEmail:{
required:true,
email:true
},
},
messages: {
superadminEmail:"Please enter your Email id"
},
submitHandler: function(){
var formData =$("#superAdminDetailsForm").serialize();
$.ajax({
url:'/accounts',
type:'post',
datatype: 'json',
data: formData,
success : function(response){
if(response == "true"){
window.location='/accounts';
} else {
alert("false")
}
},
error: function (request,status, error) {
}
});
return false;
}
});
});
$('#updatePassword').on('click', function() {$("#superAdminDetailsForm").validate({
rules: {
oldPassword:"required",
newPassword:"required",
confirmpassword:{
require :"true",
equalTo : "#oldPassword"
}
},
messages: {
oldPassword:"Please enter Old Password ",
newPassword: "Please enter New Password",
confirmpassword:"Retype password is incorrect"
},
submitHandler: function(){//to pass all data of a form serial
var formData =$("#superAdminDetailsForm").serialize();
$.ajax({
url:'/changePassword',
type:'post',
datatype: 'json',
data: formData,
success : function(response){
if(response == "true"){
window.location = '/accounts';
} else {
alert("password incorrect");
}
},
error: function (request,status, error) {
}
});
return false;
}
});
});
});

Categories