HTML Code:Invalid Data is being submitted


This question already has an answer here: ---------------Answer---------------

Your onsubmit function should return false and preventDefault() on the event for each case where it fails validation. Your onsubmit should also be bound to the form element, not the button.

I get the impression that this is an assignment for a class, but I would still like to reiterate the point that inline JS is generally bad for both readability and maintainability of your code. If your class permits it, use event listeners.

function formValidation(e) {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var mobile = document.getElementById("mobile").value;
  var address = document.getElementById("address").value;
  var pincode = document.getElementById("pincode").value;
  var state = document.getElementById("state").value;
  var country = document.getElementById("country").value;
  var coursename = document.getElementById("coursename").value;
  var pattern1 = /^\d{6}$/;
  var pattern2 = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  var letters = /^[A-Za-z]+$/;
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (name == '') {
    alert('Please enter your name');
  } else if (!letters.test(name)) {
    alert('Name field required only alphabet characters');
  } else if (document.getElementById("name").value.length < 6) {
    alert('Name minimum length is 6');
  } else if (document.getElementById("name").value.length > 33) {
    alert('Name maximum length is 33');
  } else if (email == '') {
    alert('Please enter your user email id');
  } else if (!filter.test(email)) {
    alert('Invalid email');
  } else if (mobile == '') {
    alert('Please enter your mobile');
  } else if (!pattern2.test(mobile)) {
    alert('Mobile Should be 10 digits')
  } else if (address == '') {
    alert('Please enter your address');
  } else if (document.getElementById("address").value.length < 20) {
    alert('Address minimum length is 20');
  } else if (document.getElementById("address").value.length > 32) {
    alert('Address maximum length is 32');
  } else if (pincode == '') {
    alert('Please enter your pincode');
  } else if (!pattern1.test(pincode)) {
    alert('Pincode Should be 6 digits')
  } else if (state == '') {
    alert('Please enter your state');
  } else if (!letters.test(state)) {
    alert('State field required only alphabet characters');
  } else if (document.getElementById("state").value.length < 6) {
    alert('state minimum length is 6');
  } else if (document.getElementById("state").value.length > 33) {
    alert('state maximum length is 33');
  } else if (country == '') {
    alert('Please enter your Country');
  } else if (!letters.test(country)) {
    alert('Country field required only alphabet characters');
  } else if (document.getElementById("country").value.length < 5) {
    alert('Country Name minimum length is 6');
  } else if (document.getElementById("Country").value.length > 33) {
    alert('Country Name maximum length is 33');
  } else if (coursename == '') {
    alert('Please enter your course name');
  } else if (!letters.test(coursename)) {
    alert('Course Name field required only alphabet characters');
  } else if (document.getElementById("name").value.length < 3) {
    alert('Course Name minimum length is 6');
  } else if (document.getElementById("coursename").value.length > 40) {
    alert('Course Name maximum length is 40')
  } else {
    alert('Thank You for Registratione');
    return true;
  }
  e.preventDefault();
  return false;
}
body {
  font-family: Arial;
}

input[type=text],
textarea,
input[type=date] {
  width: 96%;
  padding: 12px 20px;
  margin: 8px 0;
}

select {
  width: 99%;
  padding: 12px 20px;
  margin: 8px 0;
}

input[type=submit],
input[type=reset] {
  width: 100%;
  background-color: grey;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
}
<h3>STUDENT REGISTRATION FORM</h3>
<form name="registration" onsubmit="formValidation(event)">
  Applicant Name:<input type="text" name="name" id="name" placeholder="Enter your Full  Name"><br> Email id:<input type="text" name="email" id="email" placeholder="Enter your email id"><br> Mobile Number:<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number"><br>  Address:

  <textarea name="address" id="address" cols="35" rows="4"></textarea><br> Pin Code<input type="text" name="pincode" id="pincode" placeholder="Enter the pincode"><br> State:
  <br><input type="text" name="state" id="state" placeholder="Enter the state name"><br> Country:
  <input type="text" name="country" id="country" placeholder="Enter the name of residing country"><br> Course Name:<input type="text" name="coursename" id="coursename" placeholder="Enter the course name">

  <!-- <input type="submit" name="submit" value="Submit" onclick="formValidation()" /> -->
  <button type="submit">Submit</button>

</form>
---------------Answer---------------

I would highly suggest you use the addEventListener instead of using the HTML for this. A solution with addEventListener:

const form = document.querySelector("form");

function formValidation() {
   form.addEventListener("submit", (e) => {
       if(/*your condition is invalid*/) {
           e.preventDefault();
       } else if.....
       //your other validations here
   })
}
---------------Answer---------------

Please use this code

function formValidation() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var mobile = document.getElementById("mobile").value;
    var address = document.getElementById("address").value;
    var pincode = document.getElementById("pincode").value;
    var state = document.getElementById("state").value;
    var country = document.getElementById("country").value;
    var coursename = document.getElementById("coursename").value;
    var pattern1 = /^\d{6}$/;
    var pattern2 = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
    var letters = /^[A-Za-z]+$/;
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (name == '') {
      alert('Please enter your name');
      return false;
    } else if (!letters.test(name)) {
      alert('Name field required only alphabet characters');
      return false;
    } else if (document.getElementById("name").value.length < 6) {
      alert('Name minimum length is 6');
      return false;
    } else if (document.getElementById("name").value.length > 33) {
      alert('Name maximum length is 33');
      return false;
    } else if (email == '') {
      alert('Please enter your user email id');
      return false;
    } else if (!filter.test(email)) {
      alert('Invalid email');
      return false;
    } else if (mobile == '') {
      alert('Please enter your mobile');
      return false;
    } else if (!pattern2.test(mobile)) {
      alert('Mobile Should be 10 digits')
      return false;
    } else if (address == '') {
      alert('Please enter your address');
      return false;
    } else if (document.getElementById("address").value.length < 20) {
      alert('Address minimum length is 20');
      return false;
    } else if (document.getElementById("address").value.length > 32) {
      alert('Address maximum length is 32');
      return false;
    } else if (pincode == '') {
      alert('Please enter your pincode');
      return false;
    } else if (!pattern1.test(pincode)) {
      alert('Pincode Should be 6 digits')
      return false;
    } else if (state == '') {
      alert('Please enter your state');
      return false;
    } else if (!letters.test(state)) {
      alert('State field required only alphabet characters');
      return false;
    } else if (document.getElementById("state").value.length < 6) {
      alert('state minimum length is 6');
      return false;
    } else if (document.getElementById("state").value.length > 33) {
      alert('state maximum length is 33');
      return false;
    } else if (country == '') {
      alert('Please enter your Country');
      return false;
    } else if (!letters.test(country)) {
      alert('Country field required only alphabet characters');
      return false;
    } else if (document.getElementById("country").value.length < 5) {
      alert('Country Name minimum length is 6');
      return false;
    } else if (document.getElementById("Country").value.length > 33) {
      alert('Country Name maximum length is 33');
      return false;
    } else if (coursename == '') {
      alert('Please enter your course name');
      return false;
    } else if (!letters.test(coursename)) {
      alert('Course Name field required only alphabet characters');
      return false;
    } else if (document.getElementById("name").value.length < 3) {
      alert('Course Name minimum length is 6');
      return false;
    } else if (document.getElementById("coursename").value.length > 40) {
      alert('Course Name maximum length is 40')
      return false;
    } else {
      alert('Thank You for Registratione');
      return false;
    }
    return true;
}

<h3>STUDENT REGISTRATION FORM</h3>
<form name="registration" onsubmit="return formValidation()">
  Applicant Name:<input type="text" name="name" id="name" placeholder="Enter your Full  Name"><br> Email id:<input type="text" name="email" id="email" placeholder="Enter your email id"><br> Mobile Number:<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number"><br>  Address:

  <textarea name="address" id="address" cols="35" rows="4"></textarea><br> Pin Code<input type="text" name="pincode" id="pincode" placeholder="Enter the pincode"><br> State:
  <br><input type="text" name="state" id="state" placeholder="Enter the state name"><br> Country:
  <input type="text" name="country" id="country" placeholder="Enter the name of residing country"><br> Course Name:<input type="text" name="coursename" id="coursename" placeholder="Enter the course name">

  <!-- <input type="submit" name="submit" value="Submit" onclick="formValidation()" /> -->
  <button type="submit" >Submit</button>
---------------Answer---------------

To prevent form submission, first you change the submit button type form submit to button and then change the event onsubmit to onclick.

function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var mobile = document.getElementById("mobile").value;
  var address = document.getElementById("address").value;
  var pincode = document.getElementById("pincode").value;
  var state = document.getElementById("state").value;
  var country = document.getElementById("country").value;
  var coursename = document.getElementById("coursename").value;
  var pattern1 = /^\d{6}$/;
  var pattern2 = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  var letters = /^[A-Za-z]+$/;
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   
  if (name == '') {
    alert('Please enter your name');
  } else if (!letters.test(name)) {
    alert('Name field required only alphabet characters');
  } else if (document.getElementById("name").value.length < 6) {
    alert('Name minimum length is 6');
  } else if (document.getElementById("name").value.length > 33) {
    alert('Name maximum length is 33');
  } else if (email == '') {
    alert('Please enter your user email id');
  } else if (!filter.test(email)) {
    alert('Invalid email');
  } else if (mobile == '') {
    alert('Please enter your mobile');
  } else if (!pattern2.test(mobile)) {
    alert('Mobile Should be 10 digits')
  } else if (address == '') {
    alert('Please enter your address');
  } else if (document.getElementById("address").value.length < 20) {
    alert('Address minimum length is 20');
  } else if (document.getElementById("address").value.length > 32) {
    alert('Address maximum length is 32');
  } else if (pincode == '') {
    alert('Please enter your pincode');
  } else if (!pattern1.test(pincode)) {
    alert('Pincode Should be 6 digits')
  } else if (state == '') {
    alert('Please enter your state');
  } else if (!letters.test(state)) {
    alert('State field required only alphabet characters');
  } else if (document.getElementById("state").value.length < 6) {
    alert('state minimum length is 6');
  } else if (document.getElementById("state").value.length > 33) {
    alert('state maximum length is 33');
  } else if (country == '') {
    alert('Please enter your Country');
  } else if (!letters.test(country)) {
    alert('Country field required only alphabet characters');
  } else if (document.getElementById("country").value.length < 5) {
    alert('Country Name minimum length is 6');
  } else if (document.getElementById("Country").value.length > 33) {
    alert('Country Name maximum length is 33');
  } else if (coursename == '') {
    alert('Please enter your course name');
  } else if (!letters.test(coursename)) {
    alert('Course Name field required only alphabet characters');
  } else if (document.getElementById("name").value.length < 3) {
    alert('Course Name minimum length is 6');
  } else if (document.getElementById("coursename").value.length > 40) {
    alert('Course Name maximum length is 40')
  } else {
    alert('Thank You for Registratione');

  }
}
body {
  font-family: Arial;
}

input[type=text],
textarea,
input[type=date] {
  width: 96%;
  padding: 12px 20px;
  margin: 8px 0;
}

select {
  width: 99%;
  padding: 12px 20px;
  margin: 8px 0;
}

input[type=submit],
input[type=reset] {
  width: 100%;
  background-color: grey;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h3>STUDENT REGISTRATION FORM</h3>
  <form name="registration">
    Applicant Name:<input type="text" name="name" id="name" placeholder="Enter your Full  Name"><br> Email id:<input type="text" name="email" id="email" placeholder="Enter your email id"><br> Mobile Number:<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number"><br>  Address:

    <textarea name="address" id="address" cols="35" rows="4"></textarea><br> Pin Code<input type="text" name="pincode" id="pincode" placeholder="Enter the pincode"><br> State:
    <br><input type="text" name="state" id="state" placeholder="Enter the state name"><br> Country:
    <input type="text" name="country" id="country" placeholder="Enter the name of residing country"><br> Course Name:<input type="text" name="coursename" id="coursename" placeholder="Enter the course name">

    <!-- <input type="submit" name="submit" value="Submit" onclick="formValidation()" /> -->
    <button type="button" onClick="formValidation()">Submit</button>

  </form>
</body>
</html>

Previous : Google Sheets: Dynamic Generated IMPORTRANGE formula
Next : Only show specific styling if certain theme