Reputation: 151

javascript form validation for empty field and wrong input

this program runs correctly.. my task is, when name field left empty then (please enter your name )this error will be generated and when i type wrong input(like numbers)then (only alphabets and white space are allowed)this error message has to be generate. how can i do this.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Validation tutorial</title>
<script>
function validateName(x){
  // Validation rule

  var re = /[A-Za-z -']$/;
  // Check input
  if(re.test(document.getElementById(x).value)){
    // Style green
    document.getElementById(x).style.borderColor ='#3BFF3B';
    // Hide error prompt
    document.getElementById(x + 'Error').style.display = "none";
    return true;
  }else{
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error').style.display = "block";
    return false; 
  }
 }
 // Validate email
function validateEmail(email){ 
  var re = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(re.test(email)){
    document.getElementById('email').style.borderColor ='#3BFF3B';
    document.getElementById('emailError').style.display = "none";
    return true;
  }else{
    document.getElementById('email').style.borderColor ='#FF0000';
    return false;
  }
 }
 // Validate Select boxes
 function validateSelect(x){
  if(document.getElementById(x).selectedIndex !== 0){
    document.getElementById(x).style.borderColor ='#3BFF3B';
    document.getElementById(x + 'Error').style.display = "none";
    return true;
    }else{
    document.getElementById(x).style.borderColor ='#FF0000';
    return false; 
  }
}
function validateRadio(x){
  if(document.getElementById(x).checked){
    return true;
  }else{
    return false;
  }
}
function validateCheckbox(x){
  if(document.getElementById(x).checked){
    return true;
  }
  return false;
}   
function validateForm(){
  // Set error catcher
  var error = 0;
  // Check name
   if(!validateName('name')){
    document.getElementById('nameError').style.display = "block";
    error++;
  }
  // Validate email
  if(!validateEmail(document.getElementById('email').value)){
    document.getElementById('emailError').style.display = "block";
    error++;
  }
  // Validate animal dropdown box
  if(!validateSelect('subject')){
    document.getElementById('subjectError').style.display = "block";
    error++;
  }
  // Validate Radio
  if(validateRadio('male')){

  }else if(validateRadio('female')){

  }else{
    document.getElementById('genderError').style.display = "block";
    error++;
  }

  // Don't submit form if there are errors
  if(error > 0){
    return false;
  }
  }     
  </script>
  </head>
  <body>
  <form action="" onsubmit="return validateForm()">

  <label for="name">Name</label>
  <input type="text" name="name" id="name" onblur="validateName(name)" />
  <span id="nameError" style="display: none;">only alphabates and white space are allowed</span>
    <br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  <span id="emailError" style="display: none;">You must enter a valid email address</span>
<br><br>

  <label for="hand">Gender</label>
  <ul>
    <li>
      <input type="radio" name="gender" id="male" value="male" onblur="validateRadio(id)" />
      <label for="left">male</label>
    </li>
    <li>
      <input type="radio" name="gender" id="female" value="female" onblur="validateRadio(id)" />
      <label for="right">female</label>
    </li>
  </ul>
  <span class="validateError" id="genderError" style="display: none;">Please select gender</span>
<br><br>
 <label for="subject">Favourite Subject</label>
  <select name="subject" id="subject" onblur="validateSelect(name)">
    <option value="">SUBJECTS</option>
    <option value="php">PHP</option>
    <option value="java">JAVA</option>
    <option value="sql">SQL</option>
  </select>
  <span class="validateError" id="subjectError" style="display: none;">You must select your favourite subject</span>
    <br><br>

  <input type="submit" id="submit" name="submit" value="Submit" />

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

Upvotes: 0

Answers (1)

Theunis

Reputation: 338

<!doctype html>
   <html lang="en">
   <head>
   <meta charset="utf-8">
<title>Validation tutorial</title>
<script>
function validateName(x){
  // Validation rule

  var re = /[A-Za-z -']$/;
  // Check input
  if(re.test(document.getElementById(x).value)){
    // Style green
    document.getElementById(x).style.borderColor ='#3BFF3B';
    // Hide error prompt
    document.getElementById(x + 'Error').style.display = "none";
    return true;
  }else if(document.getElementById(x).value === ''){
    //This is for an empty string or if name was not entered.
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error2').style.display = "block";
    return false; 
   }else{
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error').style.display = "block";
    return false; 
  }
 }
 // Validate email
function validateEmail(email){ 
  var re = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(re.test(email)){
    document.getElementById('email').style.borderColor ='#3BFF3B';
    document.getElementById('emailError').style.display = "none";
    return true;
  }else{
    document.getElementById('email').style.borderColor ='#FF0000';
    return false;
  }
 }
 // Validate Select boxes
 function validateSelect(x){
  if(document.getElementById(x).selectedIndex !== 0){
    document.getElementById(x).style.borderColor ='#3BFF3B';
    document.getElementById(x + 'Error').style.display = "none";
    return true;
    }else{
    document.getElementById(x).style.borderColor ='#FF0000';
    return false; 
  }
}
function validateRadio(x){
  if(document.getElementById(x).checked){
    return true;
  }else{
    return false;
  }
}
function validateCheckbox(x){
  if(document.getElementById(x).checked){
    return true;
  }
  return false;
}   
function validateForm(){
  // Set error catcher
  var error = 0;
  // Check name
   if(!validateName('name')){
    document.getElementById('nameError').style.display = "block";
    error++;
  }
  // Validate email
  if(!validateEmail(document.getElementById('email').value)){
    document.getElementById('emailError').style.display = "block";
    error++;
  }
  // Validate animal dropdown box
  if(!validateSelect('subject')){
    document.getElementById('subjectError').style.display = "block";
    error++;
  }
  // Validate Radio
  if(validateRadio('male')){

  }else if(validateRadio('female')){

  }else{
    document.getElementById('genderError').style.display = "block";
    error++;
  }

  // Don't submit form if there are errors
  if(error > 0){
    return false;
  }
  }     
  </script>
  </head>
  <body>
  <form action="" onsubmit="return validateForm()">

  <label for="name">Name</label>
  <input type="text" name="name" id="name" onblur="validateName(name)" />
  <span id="nameError" style="display: none;">only alphabates and white    space are allowed</span>
 <span id="nameError2" style="display: none;">please enter a name</span>
    <br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  <span id="emailError" style="display: none;">You must enter a valid email address</span>
<br><br>

  <label for="hand">Gender</label>
  <ul>
    <li>
      <input type="radio" name="gender" id="male" value="male" onblur="validateRadio(id)" />
      <label for="left">male</label>
    </li>
    <li>
      <input type="radio" name="gender" id="female" value="female" onblur="validateRadio(id)" />
      <label for="right">female</label>
    </li>
  </ul>
  <span class="validateError" id="genderError" style="display: none;">Please select gender</span>
<br><br>
 <label for="subject">Favourite Subject</label>
  <select name="subject" id="subject" onblur="validateSelect(name)">
    <option value="">SUBJECTS</option>
    <option value="php">PHP</option>
    <option value="java">JAVA</option>
    <option value="sql">SQL</option>
  </select>
  <span class="validateError" id="subjectError" style="display: none;">You must select your favourite subject</span>
    <br><br>

  <input type="submit" id="submit" name="submit" value="Submit" />

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

There are much better ways to do this. This is not an elegant way. I see this code is from an example or tutorial. Please check other tutorials on this subject, as this is just a quick way of implementing what you want.

Upvotes: 1

javascript form validation for empty field and wrong input

Answers (1)

Related Questions