validation is not done on submit button click

Question

<script>
function ValidateEmail(){
    var emailID = document.getElementById("email").value;
 var email = document.getElementById("email");
 var emailRegexp=/^[a-z]+\w+([\.-]?\w+)*@[a-z]+\w+([\.-]?\w+)*(\.[a-z]{2,3})+$/i;

    if ((emailID==null)||(emailID=="")){
      //  alert("Please Enter your Email ID");
  email.style.borderColor="red";
  document.getElementById("err").innerHTML = "Please Enter your Email ID";
        emailID.focus();
        return false;
    }
 else
 if (!emailRegexp.test(emailID)){
 //alert("Please Enter valid Email ID");
 email.style.borderColor="red";
 document.getElementById("err").innerHTML = "Please Enter valid Email ID";
 emailID.focus();
return false;
 }
 else
 {
  email.style.borderColor="#e1e1e1";
  document.getElementById("err").innerHTML ="";
  return true;
 }

 }

 function validUsername()
{
 var error = "";
 var illegalChars = /\W/; // No special Characters allowed
 var fd =document.getElementById("name");

 if (fd.value == "" || fd.value == null)
 {
  fd.style.borderColor = 'Red';
  document.getElementById("UserErr").innerHTML = " Field is left Blank.\n";
  return false;
 }
 else if ((fd.value.length < 5) || (fd.value.length > 20)) // Number of Character entered is checked
 {
  fd.style.borderColor = 'Red';
  document.getElementById("UserErr").innerHTML = "Username is should be in a range of 5 and 15..\n";
  return false;
 }
 else if (illegalChars.test(fd.value)) // check for illegal characters
 {
  fd.style.borderColor = 'Red';
  document.getElementById("UserErr").innerHTML = "Illegal Characters not allowed\n";
  return false;
 } 
 else
 {
  fd.style.borderColor = '#e1e1e1';
  document.getElementById("UserErr").innerHTML = "";
  return true;
 }
}

function validPassword()
{
 var error = "";
 var password=document.getElementById("pass");
 var passError=document.getElementById("PassErr");
 var illegalChars = /[\W_]/; // Numbers and letter only
 var checkPass=/\w*[a-z]+\d+\w*/i;

 if (password.value == "" || password.value == null)
 {
  password.style.borderColor = 'Red';
  passError.innerHTML = "Field Cannot be blank.\n";
  return false;
 }
 else if ((password.value.length < 8) || (password.value.length > 20)) // Checks length of the password
 {
  password.style.borderColor = 'Red';
  passError.innerHTML = "Length should be in Range of 8 to 20. \n";
  return false;
 }
 else if (illegalChars.test(password.value))
 {
  password.style.borderColor = 'Red';
  passError.innerHTML = "Illegal characters not allowed.\n";
  return false;
 }
 else if (!checkPass.test(password.value)) // Checks for numeric value  in entered password
 {
  password.style.borderColor = 'Red';
  passError.innerHTML = "Atleast one Numeric value Required ";
  return false;
 }
 else 
 {
  password.style.borderColor = '#e1e1e1';
  passError.innerHTML = "";
  return true;
 }
}

function validateOnSubmit()
{
 if(ValidateEmail() && validUsername() && validPassword());
  return true;
  
  return false;
}
</script>

<form method="post" name="form">
<!--<input type="text" name="email" id="email" placeholder="Your Email" onblur="return ValidateEmail()"/><span id="err"></span></td>-->
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" id="name" placeholder="User Name" onblur="validUsername()"/><span id="UserErr" style="color:red"></span></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Email" onblur="ValidateEmail()"/><span id="err"></span></td>
</tr>
<tr>
<td><input type="password" name="pass" id="pass" placeholder="Your Password" onblur="validPassword()" /><span id="PassErr" style="color:red"></span></td>
</tr>
<tr>
<td><button type="submit" onsubmit="return validateOnSubmit()" name="btn-signup">Sign Me Up</button></td>
</tr>
</table>
</form>

I have created registration form and create validation in JavaScript for input fields.

onBlur validation is done, and works fine.

But when I click on the 'Sign Me Up' button, validation is not done and data is inserted into the database. Please I need help.

sorry semicolon is not there. after removing semicolon it gives same error.. — Sudip977, Jul 14 '16 at 12:17
[The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) — Quentin, Jul 14 '16 at 12:17
have a look at this answer http://stackoverflow.com/questions/38305238/check-post-data-with-jquery-before-submitting-the-form/38307171#38307171 — dios231, Jul 14 '16 at 12:18

score 6 · Answer 1 · answered Jul 14 '16 at 12:17

6

submit events fire on forms, not submit buttons. Move the onsubmit attribute to the <form> start tag.

answered Jul 14 '16 at 12:17

Quentin

914,110
126
1,211
1,335

You are right ! And what the goal of the keyword "return" in the onsubmit ? As I know, we just have to pass a function to the attribute, no ? – Tata2 Jul 14 '16 at 12:23
@Tata2 — The value of the attribute is a function body. The return value cancels the default event (or doesn't, depending on what it is). – Quentin Jul 14 '16 at 12:28
`if(ValidateEmail() && validUsername() && validPassword());` <-- typo – epascarello Jul 14 '16 at 12:31
i have removed 'return' keyword but still have same problem – Sudip977 Jul 14 '16 at 12:32
@Sudip977 — Removing the return keyword will definitely **stop** it from working. – Quentin Jul 14 '16 at 12:32
i have removed semicolon also but same prob – Sudip977 Jul 14 '16 at 12:33

score 0 · Answer 2 · answered Jul 15 '16 at 06:43

0

"emailID.focus(); " is wrong is in ValidateEmail() function. instead of it "email.focus(); is right. Now it works fine as i expected.

but there is no need of this so i removed it.

answered Jul 15 '16 at 06:43

Sudip977

41
2

validation is not done on submit button click

2 Answers2