We Keep Coding

How to show error message from ajax response of api?

i have sent api request using jquery ajax i am getting ajax response like this
Array ( [consumer_key] => ada691a715307861907d65d36d [consumer_secret] => a75e40ec1530786190b62316d1 [consumer_nonce] => 1537011049789 [consumer_device_id] => ldx0EWMCl3hNhJWCRIdPVveLy [consumer_url] => processregistration ) {"success":"0","data":[],"message":"Email address is already exist"}
i would like to show error message if response contains "Email address is already exist" otherwise alert Message shuold be successfully submitted
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
var customers_firstname=$("#customers_firstname").val();
var customers_lastname=$("#customers_lastname").val();
var customers_telephone=$("#customers_telephone").val();
var email=$("#email").val();
var d = new Date();
var consumer_nonce = d.getTime();
U=url+'api/save_reg';
//alert(consumer_nonce);
//exit;
//var ul="{{ url('/backend/api/save_reg') }}";
$.ajax({
type:"POST",
url:url+'api/save_reg',
data:$("#postcontent").serialize(),
/* data:{
customers_firstname:customers_firstname,
customers_lastname:customers_lastname,
customers_telephone:customers_telephone,
email:email,
password:password
},*/
headers: {
"consumer-key": consumer_key,
"consumer-secret": consumer_secret,
"consumer-nonce": consumer_nonce,
"consumer-device-id": consumer_device_id,
},
beforeSend:function(){
$(".post_submitting").show().html("<center><img src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'/></center>");
},success:function(response){
alert(response);
//-- alert(response[1]);
//alert(response);
//response = response.toJSON();
//alert(response);
$("#return_update_msg").html(response);
$(".post_submitting").fadeOut(1000);
}
});
}
});
#extends('frontend.layouts.app')
#section('title','Home')
#section('body')
<!-- Main Container -->
<div class="main-container container">
<ul class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li>Account</li>
<li>Register</li>
</ul>
<div class="row">
<div id="content" class="col-sm-12">
<h2 class="title">Register Account</h2>
<p>If you already have an account with us, please login at the login page.</p>
<div id="return_update_msg" class="return_update_msg">j</div>
<div class="post_submitting"></div>
<form name="postcontent" class="cmxform" id="postcontent" >
<fieldset id="account">
<legend>Your Personal Details</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_firstname">First Name</label>
<div class="col-sm-10">
<input type="text" name="customers_firstname" minlength="2" placeholder="First Name" id="customers_firstname" class="form-control">
<span id="customers_firstname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_lastname">Last Name</label>
<div class="col-sm-10">
<input type="text" name="customers_lastname" minlength="2" placeholder="Last Name" id="customers_lastname" class="form-control">
<span id="customers_lastname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="email">E-Mail</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="E-Mail" id="email" class="form-control">
<span id="email_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-telephone">Mobile Number</label>
<div class="col-sm-10">
<input type="tel" name="customers_telephone" placeholder="Telephone" id="customers_telephone" class="form-control">
<span id="customers_telephone_error"></span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Your Password</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="password">Password</label>
<div class="col-sm-10">
<input type="password" name="password" placeholder="Password" id="password" class="form-control">
<span id="password_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="confirm_password">Password Confirm</label>
<div class="col-sm-10">
<input type="password" name="confirm_password" placeholder="Password Confirm" id="confirm_password" class="form-control">
<span id="password_confirm_error"></span>
</div>
</div>
</fieldset>
<span id="success_message"></span>
<div class="buttons">
<input class="submit btn btn-primary" id="save_buttonk" type="submit" value="Submit">
<!--<input type="submit" id="save_button" value="Continue" class="btn btn-primary">-->
</div>
</form>
</div>
</div>
</div>
<br />
<!-- //Main Container -->
#endsection
#section('pagescript')
<script type="text/javascript" src="{{ asset('public/frontend/qshopee')}}/js/registration.js"></script>
<script>
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#postcontent").validate({
rules: {
//customers_firstname: "required",
//customers_lastname: "required",
/*username: {
required: true,
minlength: 2
},*/
customers_firstname: {
required: true,
minlength: 2
},
customers_lastname: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
/*topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"*/
},
messages: {
//customers_firstname: "Please enter your firstname",
//customers_lastname: "Please enter your lastname",
/*username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},*/
customers_firstname: {
required: "Please enter a firstname",
minlength: "Your firstname must consist of at least 2 characters"
},
customers_lastname: {
required: "Please enter a lastname",
minlength: "Your lastname must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
/*agree: "Please accept our policy",
topic: "Please select at least 2 topics"*/
}
});
});
</script>
#stop

try
if (response.indexOf('Email address is already exist') > -1)
{
alert("Email Already Registered");
}
else
{
alert("Registration Successful");

Jquery.Validate Password Equalto - doesn't display error

I am able to set Required = true, min and max lengths but for some reason when i try to set an EqualTo paramater for the PasswordAgain field, the form simply allows Submit even though the passwords do not match.
<section>
<label class="input login-input">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtUserName" type="text" id="txtUserName" class="form-control" placeholder="UserName" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtEmail" type="text" id="txtEmail" class="form-control" placeholder="Email Address" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPassword" type="password" id="txtPassword" class="form-control" placeholder="Password" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain" type="password" id="txtPasswordAgain" class="form-control" placeholder="Password Confirm" />
</div>
</label>
</section>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js")%>"></script>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js")%>"></script>
<script>
jQuery(document).ready(function() {
$("#form1").validate({
// Rules for form validation
rules:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: true
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: true,
email: true
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: true,
minlength: 6,
maxlength: 20
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required:true,
minlength:6,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
},
// Messages for form validation
messages:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: '* Requires a valid UserName.'
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.',
equalTo: "Please specify the same password as above."
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});
</script>

ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{ required:true,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
Remove minlength from ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain
i hope maybe it works

Validating password Match in Javascript

I am trying to validate both passwords field and checking that both of them match but the form still gives an error even if both input boxes have the same password.
JS
var validator = $("#signupform").validate({
rules: {
password: {
required: true,
minlength: 6
},
repeatpassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
password: {
required: "Provide a password",
minlength: jQuery.format("Enter at least {0} characters")
},
repeatpassword: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Your passwords do not match"
}
},
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>

Not sure if you knew this but, "It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all." Read More
So I added a form tag.
What I think the issue with the passwords was, your were doing this:
jQuery.format("Enter at least {0} characters")
There is an error in console:
"$.format has been deprecated. Please use $.validator.format instead.";
So I changed your code to:
jQuery.validator.format("Enter at least {0} characters")
var validator = $("#signupform").validate({
rules: {
password: {
required: true,
minlength: 6
},
repeatpassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
password: {
required: "Provide a password",
minlength: jQuery.validator.format("Enter at least {0} characters")
},
repeatpassword: {
required: "Repeat your password",
minlength: jQuery.validator.format("Enter at least {0} characters"),
equalTo: "Your passwords do not match"
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form id="signupform">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="repeatpassword" id="repeatpassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>
<input type="submit" value="Submit">
</form>

JQuery Validation matching fields

I am developing a project with a registration form. I have 2 email fields as well as 2 password fields, each need to match each other. I am using JQuery validate and Bootstrap in an ASP.NET MVC 4 (C#) framework. Even if they are matching, the fields are getting the error that they do not match.
HTML
Registration Form
<div class="row">
<form id="formRegister" class="form-horizontal col-xs-5">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-2">First name</label>
<div class="col-xs-4">
<input type="text" name="textFirstName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-2">Last name</label>
<div class="col-xs-4">
<input type="text" name="textLastName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-4">
<input type="text" name="textEmail" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-2">Reenter email</label>
<div class="col-xs-4">
<input type="text" name="textEmail2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-2">Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW1" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-2">Reenter Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-info">Clear</button>
</div>
</div>
</form>
</div>
JS
jQuery(function ($) {
$('#formRegister').validate({
errorElement: "div",
errorPlacement: function(error, element) {
error.appendTo(element.parent("div").next("div"));
},
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
equalTo: "#textEmail"
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
equalTo: "#passwordPW1"
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('next').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.next').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});

Your problem is that you're referring to selectors that don't match anything. For instance, #textEmail (used in the equalTo property) won't match anything in your current DOM.
Replace this line:
<input type="text" name="textEmail" class="form-control" />
With this line:
<input type="text" id="textEmail" name="textEmail" class="form-control" />
Alternatively, you can use a different selector in your equalTo property:
// ...
rules: {
// ...
textEmail2: {
equalTo: "[name=textEmail]"
},
// ...

Your validation for equalTo currently is
textEmail2: {
equalTo: "#textEmail"
}
but the input textEmail has no id="textEmail". Try to add this id and it should work then.
The same applies to other validation rules where you match against ids that are not yet added at the inputs.

I don't know anything about .asp.net and bootstrap, but
in your form, you are using the name tag, while in your javascript,
you are using a #, which refers to an ID.
Give your input an the id textEmail and passwordPW1

Groovy <g:form> validate using jquery validate()

below is example of form validation using jquery what I copied from internet,
however, when I used <g:form> instead of <form> validate function not work.
Please suggest better way to validate form using groovy form
Thanks
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
// Specify the validation error messages
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<!-- The form that will be parsed by jQuery before submit -->
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html

Your <form> tag contains novalidate Attribute which Indicates that the form is not to be validated on submit, get rid of that first. Following is sample code from test project to use jquery validation with <g:form>. Sorry for long code.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="esn-registration">
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("emailId", function(value, element) {
return this.optional(element) || /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value);
}, "Email is invalid: Enter a valid email");
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-z][\w.-]{3,20}$/i.test(value);
}, "Characters, numbers, ( _ ), ( - ) and ( . ) only");
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstName: "required",
lastName: "required",
emailId: {
required: true,
email: true,
emailId: true
},
username: {
required: true,
minlength: 3,
maxlength: 20,
username: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
firstName: { required: "Please enter your first name" },
lastName: { required: "Please enter your last name" },
emailId: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
username: {
required: "Please enter an username",
minlength: "Username must exceed 3 characters",
maxlength: "Username cannot exceed 20 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(signupForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// validate login form on keyup and submit
$("#loginForm").validate({
rules: {
username: "required",
password: {
required: true,
minlength: 6
}
},
messages: {
username: {
required: "Please enter an username or email",
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(loginForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// propose username by combining first and lastname
$("#username").focus(function() {
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
if(firstName && lastName && !this.value) {
this.value = $.trim(firstName) + "." + $.trim(lastName);
}
});
});
</script>
<title>ESN</title>
</head>
<body>
<div class="front-card">
<div class="front-welcome">
<div class="front-welcome-text">
<h3>Welcome</h3>
</div>
</div>
<div class="front-login">
<g:form name="loginForm" controller="login" action="validate"
method="POST" class="form well well-small container-fluid span3.5">
<div id="login-form">
<div class="placeholding-login-username">
<input id="user-name" name="username"
value="${loginInstance?.username }"
placeholder="Username or email" class="input-xlarge" type="text"
maxlength="100" required/>
</div>
<div class="placeholding-login-password">
<input id="password" name="password"
value="${loginInstance?.password }"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
<g:if test="${message}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${message}
</li>
</ul>
</div>
</g:if>
<div class="button pull-right">
<button name="submit" class="btn" type="submit">Login</button>
</div>
</div>
</g:form>
</div>
<div class="front-signup">
<g:form name="signupForm" action="save" method="POST"
class="form well well-small container-fluid span3.5">
<div id="signup-form">
<fieldset class="form">
<legend>
<h5>
<strong class="muted">New to ESN?</strong> <strong
class="text-info"> Sign up</strong>
</h5>
</legend>
<div class="placeholding-first-name">
<input id="firstName" name="firstName"
value="${userInstance?.firstName}" placeholder="First name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-last-name">
<input id="lastName" name="lastName"
value="${userInstance?.lastName}" placeholder="Last name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-email-id">
<input id="emailId" name="emailId"
value="${userInstance?.emailId}" placeholder="Email Id(Corporate)"
class="input-xlarge" type="email" maxlength="100" required/>
</div>
<div class="placeholding-signup-username">
<input id="username" name="username"
value="${userInstance?.username}" placeholder="Username"
class="input-xlarge" type="text" maxlength="20" required/>
</div>
<div class="placeholding-signup-password">
<input id="password" name="password"
value="${userInstance?.password}"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
</fieldset>
<fieldset class="button pull-right">
<button id="submit" name="submit" class="btn btn-primary" type="submit">Sign
up</button>
</fieldset>
<div>
<g:if test="${blankMessage}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${blankMessage}
</li>
</ul>
</div>
</g:if>
<g:hasErrors bean="${userInstance}">
<div class="text-error">
<ul class="errors" role="alert">
<g:eachError bean="${userInstance}" var="error">
<li
<g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message
error="${error}" /></li>
</g:eachError>
</ul>
</div>
</g:hasErrors>
</div>
</div>
</g:form>
</div>
</div>
</body>
</html>