javascript form validation for empty field and wrong input

Question

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>

Do some research before asking a question that has been answered a million times. Check Here there is a easy example, and all I did was search. — Theunis
– Theunis, Commented Nov 2, 2015 at 10:06
@Theunis i researched on all of this but i am new in javascript so thats why ask this qustion.. if you know answer then reply me.. its urgent.. — Dinesh Gawande
– Dinesh Gawande, Commented Nov 2, 2015 at 10:12
Possible duplicate of The definitive guide to form-based website authentication — bguiz
– bguiz, Commented Nov 2, 2015 at 11:36

Theunis · Accepted Answer · 2015-11-02 10:54:24Z

<!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.

yes this is from one tutorial.. as you say i will check for other tutorial.. is there any site or tutorial u konw?

Collectives™ on Stack Overflow

javascript form validation for empty field and wrong input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related