I created a form for Validation But Only the Author Name is getting Validated and rest of other input field is getting submitted without getting validation
I tried giving name to form and retrieving the values from it but it doesn't seem to work. I created a seperate file for JavaScript and JSP Page
The Below One is HTML Form
<form method="post" class="form-custom" onsubmit="return validateForm()" action="../AddProducts">
<div class="row">
<div class="col">
<label for="bname">Book Name</label>
<input type="text" class="form-control" id="bname" placeholder="Enter Book name" name="bname">
<p class="error" id="error_name"></p>
</div>
<div class="col">
<label for="authorname">Author Name</label>
<input type="text" class="form-control" id="author" name="author" placeholder="Enter Author name">
<p class="error" id="error_author"></p>
</div>
</div>
<div class="row">
<div class="col">
<label for="bname">Price</label>
<input type="text" class="form-control" id="price" name="price" placeholder="Enter Price" >
<p class="error" id="error_price"></p>
</div>
<div class="col">
<label for="authorname">Quantity</label>
<input type="text" class="form-control" id="qty" name="qty" placeholder="Enter Qty" >
<p class="error" id="error_qty"></p>
</div>
<div class="col">
<label for="authorname">Select Category</label>
<select class="custom-select" id="inputGroupSelect01">
<option selected value="-1">Choose...</option>
<c:forEach var="r" items="${rs.rows}">
<option value="${r.category}">${r.category}</option>
</c:forEach>
</select>
<p class="error" id="error_select"></p>
</div>
<div class="col">
<label>Choose Book Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01" id="custom-label">Choose file</label>
<p class="error" id="error_file"></p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="desc">Description</label>
<textarea class="form-control customtxt" id="desc" rows="4"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<input type="submit" value="Save" class="btn custombtn m-2"/>
<input type="reset" value="Clear" class="btn custombtn m-2"/>
</div>
</div>
</form>
Below is the JavaScript Validation Function()
function validateForm()
{
var author=document.getElementById('author').value;
var price=document.getElementById('price').value;
var qty=document.getElementById('qty').value;
var bname=document.getElementById("bname");
var c=document.getElementById('inputGroupSelect01');
var cat=c.options[c.selectedIndex].value;
var filepath=document.getElementById("inputGroupFile01").value;
var allowedExtension=/(\.jpg|\.jpeg|\.png|\.gif)$/i;
if(!author.match(/[A-z]+$/))
{
document.getElementById('error_author').innerHTML="*Please Enter Valid Author Name!";
document.getElementById('author').focus();
return false;
}
else if(!bname.match(/[A-z]+$/))
{
document.getElementById('error_name').innerHTML="*Please Enter Valid Book Name";
document.getElementById('bname').focus();
return false;
}
else if(!price.match(/^\d+(?:[.,]\d+)*$/))
{
document.getElementById('error_price').innerHTML="*Please Enter Valid Price!";
document.getElementById('price').focus();
return false;
}
else if(!qty.match(/^[0-9]+$/))
{
document.getElementById('error_qty').innerHTML="*Please Enter Valid Quantity!";
document.getElementById('qty').focus();
return false;
}
else if(cat===-1)
{
document.getElementById('error_select').innerHTML="*Please Select a Category!";
return false;
}
else if(filepath==="")
{
document.getElementById('error_file').innerHTML="*Please Upload Image!";
filepath.value="";
return false;
}
//exec -> search for the particular word is there or not
else if(!allowedExtension.exec(filepath))
{
document.getElementById('error_file').innerHTML="*Please Upload Valid Image!";
filepath.value="";
return false;
}
else
{
return true;
}
}
Related
I will try to make it short as possible. I have built a signup form for my project using bootstrap 5 validators and I'm facing a problem with the retype password input, if the user writes a password that didn't match the password he wrote earlier the green border of the input keep showing and the red border not showing not red and the jquery script of password comparison is actually working. here is my code I hope you understood my issue :
<div class="tab-pane fade" id="nav-signup" role="tabpanel" aria-labelledby="nav-signup-tab">
<form class="row row m-auto p-5 g-2 needs-validation" method="post" action="../public/include/signup.inc.php" id="reg-form" novalidate>
<div class="col-md-3">
<input type="text" class="form-control" id="Fname" minlength="3" maxlength="12" placeholder="First Name..." onclick="validate()" autofocus required>
<div class="valid-feedback" id="fnvt">
Looks good !
</div>
<div class="invalid-feedback" id="fnvf">
</div>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="LName" placeholder="Last Name..." required>
<div class="valid-feedback" id="lnvt">
Looks good!
</div>
<div class="invalid-feedback" id="lnvf">
</div>
</div>
<div class="col-md-3">
<input type="email" class="form-control" id="email" maxlength="50" placeholder="Enter your email..." required>
<div class="valid-feedback" id="emvt">
Looks good!
</div>
<div class="invalid-feedback" id="emvf">Email not correct !</div>
</div>
<div class="col-md-3">
<input type="password" class="form-control no-validate" name="pw1" minlength="6" maxlength="24" id="pw1" placeholder="Enter a password..." required >
<div class="valid-feedback" id="pwvt1">
Looks good!
</div>
<div class="invalid-feedback" id="pwvf1">Enter a password !</div>
</div>
<div class="col-md-3">
<input type="password" class="form-control" name="pw2" id="pw2" placeholder="Retype your password..." minlength="6" required>
<div class="valid-feedback" id="cpvt"></div>
<div class="invalid-feedback" id="cpvf">Password not match</div>
</div>
<div class="col-md-3">
<input type="tel" value="05" maxlength="10" minlength="10" aria-describedby="inputGroupPrepend" placeholder="Phone number..." class="form-control" id="phone" onkeypress="validate(event)" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Write a correct phone number.
</div>
<div class="valid-feedback">
</div>
<div class="col-15 mt-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" style="font-family: Tajawal; color: #fff;" for="invalidCheck">
By signing up, I agree to the terms and coniditons of the platform !
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
<div class="justify-content-center mt-4" action="?" method="POST">
<div class="mt-2 g-recaptcha" data-sitekey="your_site_key">
<div class="invalid-feedback"></div>
</div>
<br/>
<div class="col-12 mt-3">
<button class="btn btn-primary" name="submitup" type="submit">Register</button>
</div>
</div>
</form>
Bootstrap 5 validation script :
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
jquery password compare :
$(document).ready(function(e){
$("#reg-form").submit(function(event){
let $pw1 = $("#pw1");
let $pw2 = $("#pw2");
let $error = $("#cpvf");
let $true = $("#cpvt");
if ($pw1.val() === $pw2.val()) {
return true;
}if ($pw1.val() !== $pw2.val()) {
$error.text("Password not Match");
event.preventDefault();
}
});
})
here is an example of the problem, the code is working but the retype border is green and it is supposed to show a red border.
best regards.
I'm trying to make a message to appear when all validation in a form are through but it doesn't work
here's my codepen
https://codepen.io/v-ho-ng-hip/pen/ExVRLMv
//submit form
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
//prevent default submit
event.preventDefault();
//run validators
validateFName();
validateLName();
validateEmail();
validatePass();
validateConfirmPass();
validateCity();
validateGender();
if (validateFName() && validateLName() && validateEmail() && validatePass() && validateConfirmPass && validateCity() && validateGender()) {
const successMsg = document.getElementById('success');
successMsg.innerHTML = 'Registered successfully!';
};
What am I doing wrong here? I'm trying to make a message appear when all inputs are through.
here's my html
<body>
<div class="container">
<form method="POST" id="myForm" name="myForm" class="form-horizontal" role="form" novalidate>
<h2>Registration</h2>
<div class="form-row">
<div class="form-group col-lg-6 px-4">
<label for="firstName" class="control-label">First Name*</label>
<div>
<input type="text" id="firstName" placeholder="First Name" class="form-control" onfocusout="return validateFName()">
<div name="message"></div>
</div>
</div>
<div class="form-group col-lg-6 px-4">
<label for="lastName" class="control-label">Last Name*</label>
<div>
<input type="text" id="lastName" placeholder="Last Name" class="form-control" onfocusout="return validateLName()">
<div name="message"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email* </label>
<div class="col-sm-12">
<input type="" id="email" placeholder="Email" class="form-control" name="email" onfocusout="return validateEmail()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-12 control-label">Password* <em>(Password must have more than 8 characters)</em></label>
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" class="form-control" onfocusout="return validatePass()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Confirm Password*</label>
<div class="col-sm-12">
<input type="password" id="password2" placeholder="Password" class="form-control" onfocusout="return validateConfirmPass()">
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-12">
<input type="date" id="birthDate" class="form-control">
</div>
<div name="message"></div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-3 control-label">City*</label>
<div class="col-sm-12">
<select name="city" id="city" class="form-control" placeholder="" onfocusout="return validateCity()">
<option>
Select </option>
<option>
TP. Hồ Chí Minh </option>
<option>
Đà Nẵng </option>
<option>
Hải Phòng </option>
<option>
Hà Nội </option>
<option>
Long An </option>
<option>
Bình Dương </option>
<option>
Đồng Nai </option>
<option>
Bà Rịa - Vũng Tàu </option>
<option>
Other </option>
</select>
<div name="message"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Gender*</label>
<div class="col-sm-6">
<div class="row" id="genderSelect">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="femaleRadio" value="Female">Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="maleRadio" value="Male">Male
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="gender" id="otherRadio" value="Other">Other
</label>
</div>
</div>
<div name="message"></div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-12 col-sm-offset-3">
<span class="help-block">*Required fields</span>
</div>
</div>
<div id="success"></div>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form> <!-- /form -->
</div> <!-- ./container -->
<script src="script.js"></script>
</body>
All validations work but the message doesnt. Im a newbie so if there are any tips i can improve im welcoming them all. thanks!
Your problem here is not very complicated, so whenever you trying to validate one of your inputs, you are calling a function related to that input, some of your existing function does not work as expected like the below one:
function validateFName() {
// check if is empty
if (checkIfEmpty(firstName)) return;
// is if it has only letters
if (checkIfOnlyLetters(firstName)) return;
return true;
};
What's happening here?
So the problem here is in both cases of success or failure of your check attempt you will return undefined like this: if (checkIfOnlyLetters(firstName)) return;, because of the second return statement (return true) never runs, since the first return statement (return;) block the execution of other lanes in this function.
At last your condition:
if (validateFName() && validateLName() && validateEmail() && validatePass() && validateConfirmPass && validateCity() && validateGender())
will return false so it won't run the next two lines in your condition anymore.
How to fix this?
So you need to make a little change here like this:
function validateFName() {
// check if is empty
if (checkIfEmpty(firstName)) return false;
// is if it has only letters
if (checkIfOnlyLetters(firstName))
return true;
};
So whenever your check attempt is successful it will return true otherwise it will return false.
Working demo: codepen.io
NOTE: You can read more about return here.
I am trying to figure out how to check if all 4 inputs are filled out then checkmark the contact information check box. If any are not filled out uncheck the checkbox.
Any help with this would be greatly appreciated.
$(document).on('change', '#ContactName, #ContactEmail, #ContactPhone', function() {
if ('#ContactName, #ContactEmail, #ContactPhone' === '') {
$("#contactinformation").prop("checked", false);
} else {
$("#contactinformation").prop("checked", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" />
Contact information
</div>
</div>
</div>
Answer updated to reflect new requirement that BusinessName be optional.
See the comments inline:
// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
let count = 0; // Keep track of how many are filled in
// Loop over all the text fields
$('.form-control:not("#BusinessName")').each(function(idx, el){
// If the field is not empty....
if(el.value !== ""){
count++; // Increase the count
}
});
// Test to see if all 3 are filled in
if(count === 3){
$("#contactinformation").prop("checked", true); // Check the box
} else {
$("#contactinformation").prop("checked", false); // Unheck the box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" disabled />
Contact information
</div>
</div>
</div>
Please try with below code snippet.
<input type="text" class="form-control input-sm InputText" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
$( document ).ready(function() {
$(".InputText").change(function(){
var checkCheckBox= true;
$(".InputText").each(function() {
if ($.trim($(this).val()) != '') {
checkCheckBox = false;
}
});
if (checkCheckBox == true)
{
$("#contactinformation").prop("checked",true);
}
else
{
$("#contactinformation").prop("checked",false);
}
});
});
Add "InputText" class in textbox, if you want to validate this thing.
In login page i want to create form validation.
i wrote below mentioned code. but it does not work. i want to hide sign up button and show button when all the fields is not empty.
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('input').val();
while(inputsignup != null && !inputsignup.isEmpty()) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="input">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="input">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="input">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="input">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="input">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="input" onblur="Checkemailsignup()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>
above mentioned dont work. please advice what is problem?
var inputsignup = document.getElementsByClassName('inputField') ;
This will return all elements with the specified class.So.You have to loop through the each element and check if the value is empty
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('inputField') ;
var flag = false;
for(var i in inputsignup){
if(inputsignup[i].value== '' ){
flag = true;
}else{
//console.log(inputsignup[i].value);
}
}
if(!flag) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="inputField">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="inputField">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="inputField" onblur="signupbtnactive()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>
<script>
//Set up the event listener to check every input when one changes
$(".group input").change(checkInputs)
//function that checks all the inputs for values
function checkInputs() {
let $signUpButton = $("#signupbtn")
let $inputs = $(".group input")
let numOfEmptyInputs = $inputs.filter((i, input) => !input.value).length
if(numOfEmptyInputs === 0) {
$signUpButton.show()
} else {
$signUpButton.hide()
}
}
</script>
Currently validating a multistep form using parsley.js. All other required attributes works fine and validate properly. I just need help extending the form validation to ensure that the values for both password and confirm password fields match
$(function () {
var $sections = $('.form-section');
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function() {
navigateTo(curIndex() - 1);
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function() {
if ($('#individualForm').parsley().validate({group: 'block-' + curIndex()}))
navigateTo(curIndex() + 1);
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.5.1/parsley.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="individualForm" action="" class="indivform" method="post">
<div id="individualForm1" class="form-section">
</div>
<div class="regForm">
<div class="form-group formGroup">
<label for="usertype"> Tell us who you are </label>
<select class="form-control allForms" name="usertype" id="usertype">
<option selected>Student</option>
<option>Intern</option>
<option>National Service</option>
<option>Entry-Level Employee</option>
<option>Mid-level Manager</option>
<option>Senior-Level Manager</option>
<option>Executive</option>
<option>Foreign Expert</option>
</select>
</div>
</div>
<div class="form-group formGroup">
<label for="email"> Email Address</label>
<input type="email" name="email" id="email" class="form-control allForms" required placeholder="Enter your email address">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password"> Password </label>
<input type="password" name="password" id="password" minlength="6" class="form-control allForms" required placeholder="Enter password">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password_confirmation"> Confirm Password </label>
<input type="password" name="password_confirmation" minlength="6" id="password_confirmation" class="form-control allForms" required placeholder="Re-enter password">
</div>
</div>
</div>
</div>
<div id="individualForm2" class="form-section">
<div class="text-center stepImages">
<img src="img/step-2.png" alt="step one image">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="firstname" class="form-control allForms" required placeholder="Enter first name">
</div>
<div class="form-group formGroup">
<label for="country">Your location</label>
<select class="form-control allForms" name="country" id="country" data-placeholder="Select country">
<option value="0">Getting your location...</option>
#if(isset($countries))
#foreach($countries as $country)
<option value="{{ $country->id }}" title="{{ $country->country_code }}">{{ $country->name }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="lastname">Contact Last Name</label>
<input type="text" name="lastname" id="lastname" class="form-control allForms" required placeholder="Enter last name">
</div>
<div class="genderBox2 form-group formGroup">
<br>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Male" checked="" >
Male
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
</div>
</div>
</div>
<div class="form-group formGroup">
{{--<div class="pi-col-sm-3">--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" type="text">
</div>
{{--</div>--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" required type="text">
</div>
<label for="individual_phone_number"> Phone Number</label>
<input type="text" name="phone" id="individual_phone_number" class="form-control allForms" required data-parsley-type="digits" placeholder="Enter your phone number">
</div>
</div>
<div class="modal-footer modalFooter form-navigation">
<button class="previous btn btn-success pull-left" id="newUserSubmitBtn" type="button"> Prev < </button>
<button class="next btn btn-success pull-right" id="newUserSubmitBtn" type="button"> Next > </button>
<button class="btn btn-default pull-right" id="individualSubmitBtn" type="submit"> Finish </button>
<span class="clearfix"></span>
</div>
</form>
and for both to be alphanumeric.
Should be easy using data-parsley-equalto and data-parsley-type="alphanum"