user3004237 user3004237 - 1 month ago 14
Javascript Question

JavaScript validation form integratation into one

I have a form with inputs


  • Fist name

  • Last name

  • Password

  • Etc



Current my validation works one by one. I would like to integrate them into one pop up box.
Example currently:
All not filled up; upon submission it would pop up First name not filled. I want it to be First name not filled, last name not filled etc

function validateForm() {
var x = document.forms["myForm"]["firstname"].value;
if (x == null || x == "") {
alert("First Name must be filled out");
return false;
}
var x = document.forms["myForm"]["lastname"].value;
if (x == null || x == "") {
alert("Last Name must be filled out");
return false;
}
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.forms["myForm"]["email"].value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
var status = false;
var paswordregex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if (document.forms["myForm"]["password"].value.search(paswordregex) == -1) {
alert("Please enter a at least 8 alphanumeric characters");
return false;
}
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmpassword").value;
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
var checkb = document.getElementById('checkboxid');
if (checkb.checked != true) {
alert('Agree to privacy agreement must be checked');
} else {
status = true;
}
return status;
}

Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function validateForm() {
    var regexEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    var regexMinThree = /^[A-Za-z0-9_ ]{3,13}$/;

    var userFirstName = $.trim($('.firstName').val());
    var userLastName = $.trim($('.lastName').val());
    var userEmail = $.trim($('.email').val());
    var userPassword = $.trim($('.password').val());

    var msg = '';

    if(!regexMinThree.test(userFirstName)) {
       msg = 'FirstName, ';
    } else {
       msg = '';
    }

    if(!regexMinThree.test(userLastName)) {
       msg = msg+'LastName, ';
    } else {
       msg = msg+'';
    }

    if(!regexEmail.test(userEmail)) {
       msg = msg+'Email, ';
    } else {
       msg = msg+'';
    }

    if(!regexMinThree.test(userPassword)) {
       msg = msg+'Password, ';
    } else {
       msg = msg+'';
    }

    if(!regexMinThree.test(userPassword) || !regexEmail.test(userEmail) || !regexMinThree.test(userLastName) || !regexMinThree.test(userFirstName)) {
       msg = msg+'not filled correctly.';
       alert(msg);
    }
}
</script>

<form class="userRegistrationForm" onsubmit="return false;" method="post">
<input type="text" class="firstName" placeholder ="FirstName"/>
<input type="text" class="lastName" placeholder ="LastName"/>
<input type="email" class="email" placeholder ="Email"/>
<input type="password" class="password" placeholder ="Password"/>
<button type="submit" onclick="validateForm()" class="userRegistration">Submit</button>
</form>