Displaying a message when all form validations are successful in Javascript - javascript

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.

Related

Jquery deleting element given by index

I have this div.form-group dynamically added. I have button to click to get the index. my problem is that when I delete an elment using index the third div also is deleted. how can I delete only one div by the given index, if I delete again looks like it's not updating index after it remove. is this because it is dynamically added ?
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
</div>
$('.mycontainer').find('div.form-group').eq(index).remove();
Actually, you really don't need jQuery for it:
const removeByIndex = (index = 0) =>
[...document.querySelectorAll('.mycontainer .form-group')][index].remove();
setTimeout(() => removeByIndex(2), 2000);
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" value="will be removed ...">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</div>
Your code working fine... check isn't your script runs twice.
$('.mycontainer').find('div.form-group').eq(1).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<div class="form-group">
<input type="text" value="0" class="form-control">
</div>
<div class="form-group">
<input type="text" value="1" class="form-control">
</div>
<div class="form-group">
<input type="text" value="2" class="form-control" >
</div>
<div class="form-group">
<input type="text" value="3" class="form-control" >
</div>
</div>

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

HTML/JavaScript: How to use alert when submitting a form (with queryselector)?

I wrote some HTML form where the form should alert when nothing is submitted. I started with creating this for the names. As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…
{% extends "layout.html" %}
{% block main %}
<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class="mb-3">Form</h1>
<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form action="/form" method="post" id="form_id">
<div class="form-row names">
<div class="form-group col-md-3 name1">
<label for="inputFirstname">First name</label>
<input type="name" autofocus class="form-control" id="inputFirstname" placeholder="First name">
</div>
<div class="form-group col-md-3 name2">
<label for="inputLastname">Last name</label>
<input type="name" class="form-control" id="inputLastname" placeholder="Last name">
</div>
</div>
<div class="form-row clubs">
<div class="form-group col-md-3">
<label cfor="inlineFormCustomSelect">Club preference</label>
<select class="custom-select" id="inlineFormCustomSelect">
<option disabled selected value> -- select an option -- </option>
<option value="1">PSV</option>
<option value="2">Ajax</option>
<option value="3">Feyenoord</option>
<option value="4">De Graafschap</option>
<option value="5">RKVV Bergeijk 2</option>
</select>
<div class="invalid-feedback">Please choose one option</div>
</div>
</div>
<div class="form-group">
<label for="PFoot">Preferred foot</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="right">
Right
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="left">
Left
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="zweipotig">
Zweipotig
</label>
</div>
<!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('.name1').value) {
alert('You must provide your full name!');
return false;
}
return true;
}
</script>
{% endblock %}
As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…
You are using the wrong selector (.name1) which refers a div element, not the input you are thinking. Try #inputFirstname
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('#inputFirstname').value) {
alert('You must provide your full name!');
return false;
}
else if(!document.querySelector('[name=algorithm]:checked')){
alert('You must provide Preferred foot!');
return false;
}
return true;
}
<form action="/form" method="post" id="form_id">
<div class="form-row names">
<div class="form-group col-md-3 name1">
<label for="inputFirstname">First name</label>
<input type="name" autofocus class="form-control" id="inputFirstname" placeholder="First name">
</div>
<div class="form-group col-md-3 name2">
<label for="inputLastname">Last name</label>
<input type="name" class="form-control" id="inputLastname" placeholder="Last name">
</div>
</div>
<div class="form-row clubs">
<div class="form-group col-md-3">
<label cfor="inlineFormCustomSelect">Club preference</label>
<select class="custom-select" id="inlineFormCustomSelect">
<option disabled selected value> -- select an option -- </option>
<option value="1">PSV</option>
<option value="2">Ajax</option>
<option value="3">Feyenoord</option>
<option value="4">De Graafschap</option>
<option value="5">RKVV Bergeijk 2</option>
</select>
<div class="invalid-feedback">Please choose one option</div>
</div>
</div>
<div class="form-group">
<label for="PFoot">Preferred foot</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="right">
Right
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="left">
Left
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="zweipotig">
Zweipotig
</label>
</div>
<!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
The class name1 is div, not an input. Then you have to use (".name1 input") in the querySelector
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('.name1 input').value) {
alert('You must provide your full name!');
return false;
}
return true;
}
in my case it's worked
<script>
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('#inputFirstname').value) {
alert('You must provide your full name!');
return false;
}
return true;
}

html required in form not working with issues in modal

I have a modal where i put my form inside. Now, my problem is, when i click the button of my onclick="regpatient()" button, the required will pop-up but when i look at it in console, the data was submited by a post because of my onlick function. How can i do this?
Here is my modal:
<div class="modal-body">
<form class="form-horizontal" id="frm_patientreg">
<div class="form-group">
<label class="control-label col-sm-3" for="pfname">First Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmname">Middle Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="plname">Last Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="paddress">Address:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pcontact">Contact #:</label>
<div class="col-sm-7">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pbdate">Birthdate:</label>
<div class="col-sm-5">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="page">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pheight">Height:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pweight">Weight:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="psex">Sex:</label>
<div class="col-sm-5">
<select class="form-control" id="psex" name="psex">
<option value="0">--- SELECT OPTION ---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmartiastat">Civil Status:</label>
<div class="col-sm-5">
<select class="form-control" id="pmartialstat" name="pmartialstat">
<option value="0">--- SELECT OPTION ---</option>
<option value="Single">Single</option>
<option value="Living common law">Living common law</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Separated">Separated</option>
<option value="Divorced">Divorced</option>
</select>
</div>
</div>
</div><!-- modal-body -->
<div class="modal-footer">
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div><!-- modal-footer -->
</div><!-- modal-content -->
and here is my ajax where it fires when the button in footer of my modal is clicked:
function regpatient() {
var a = $('#psex').val();
var b = $('#pmartialstat').val();
if(a == "0" || b == "0") {
alert("Please select option");
}
else {
$.ajax({
url: siteurl+"sec_myclinic/addpatient",
type: "POST",
data: $('#frm_patientreg').serialize(),
dataType: "JSON",
success: function(data) {
alert("Successfully Added");
$('#frm_patientreg')[0].reset();
}
});
}
}
If I understand your problem right you want to stop the button's default submit action and only use your onclick script. Try this:
onclick="regpatient(event)"
and
function regpatient(event) {
event.preventDefault();
...
Edit
The required fields are not getting validated by the onclick function. Some checks like this for the required values should help stop the ajax call.
if (!$('#pafname').val()) {
return alert('Please fill in all required fields.');
}
// ajax code here ...
Use this
<button value="button" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
instead of this
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>

Form validation with parsley js. Alphanumeric and password confirmation

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"

Categories