I have 5 fiels i want validate email and name on first step and in all other steps and every step user validate field with 3 digit number.
That only on first step it will validate email and name,and other measurement that is 3 digit validation.
i am referring How to validate an email address in JavaScript this question i just want validate name email on first step. what i am doing wrong.
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return ValidateField('measurename' + currentIndex);
return ValidateField('measuremail' + currentIndex);
return ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function ValidateField(classNameOfField) {
if(/^[a-zA-Z\s]+$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
There were 2 mistakes in the code.
In HTML Code, you were having className as measurename as measureemail, whereas your JS was appending currentIndex.
You were using same function to validate name,email,input, You need to seperate it and check if any of them are returning false.
Below is the working code, please check.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput4" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
</body>
JS:
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return validateName('measurename') & validateEmail('measureemail') & ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function validateName(classNameOfField) {
if($("."+ classNameOfField).val() !== "" && /^[a-zA-Z\s]+$/.test($("."+ classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
}
function validateEmail(classNameOfField) {
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ classNameOfField).val())){
return true;
}
else{
console.log("Wrong")
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
}
function ValidateField(classNameOfField) {
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
return true;
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});