List of javascript functions[No library] that are used to validate 9 types of input fields with jQuery

Today I am going to list top 20 javascript functions that can validate different types of input fields The following are the most commonly used input fields that you'll have to validate in daily routine

1. Check if input is empty The following code shows validation of any input field being empty or not. 

The .on('focusout') event checks for the user to put his cursor into the field and move away.

<input id="nameInput" type="text" />
 <script>
 // isEmpty : check if the input is empty (true if empty false if filled)
 $("#nameInput").on('focusout', function(){
 if(($(this).val() == '') ? true : false){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please input text<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

Demo

2. Validate an input field for valid URL input

The following code checks an input field and tells if a valid url is inserted. This solution uses regular expressions to validate the input content.

<input id="urlInput" type="text" />
 <script type="text/javascript">
 // isValidUrl: check if the value passed is a valid url (True if valid, false if invalid)
 urlRegex = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
 $("#urlInput").on('focusout', function(){
 var urlTest = false;
 if(!urlRegex.test($(this).val())){

 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please insert a valid url<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });

 </script>

Demo

3. Validate an input field for valid email input

<input id="emailInput" type="text" />
 <script type="text/javascript">
 // isValidEmail: check if the value passed is a valid email (True if valid, false if invalid)
 emailRegex = /^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/;
 $("#emailInput").on('focusout', function(){
 if(!emailRegex.test($(this).val())){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please insert a valid email<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

4. Validate a textarea field if it's empty or not

The following code validates if the textarea was filled with text or left empty.

<textarea id="textareaInput" cols="30" name="" rows="10"></textarea> <script type="text/javascript">
 // isEmpty : check if the textarea is empty (true if empty false if filled)
 $("#textareaInput").on('focusout', function(){
 if(($(this).val() == '') ? true : false){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please input text<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

5. Validate an input field for valid password input

The following codes validates an input field and identifies if the password requires the given criteria. The criteria is "Input must contain at least one digit/lowercase/uppercase letter and be at least six characters long".

<input id="passwordInput" type="password" />
 <script type="text/javascript">
 // isValidEmail: check if the value passed is a valid email (True if valid, false if invalid)
 emailRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
 $("#passwordInput").on('focusout', function(){
 if(!emailRegex.test($(this).val())){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Input must contain at least one digit/lowercase/uppercase letter and be at least six characters long<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

6. Check if checkbox is checked or not checked

The following code shows/hides more fields if checkbox is checked/not checked.

<label><input id="checkboxInput" type="checkbox" />Check this to show more fields</label></pre>
<div class="more-fields" style="display: none;"><label><input type="checkbox" />more fields 1</label> <label><input type="checkbox" />more fields 2</label> <label><input type="checkbox" />more fields 3</label></div>
<script>
 // isChecked : check if the checkbox is checked (true if checked false if not checked)
 $("#checkboxInput").on('click', function(){
 if(!$(this).is(":checked")){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please input text<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

Check this to show more fields

more fields 1more fields 2more fields 3

8. Validate if user input is a number 

The following code will show an error message when something other than numbers is inserted.

<input id="numberInput" type="text" />
 <script>

 // isEmpty : check if the input is empty (true if empty false if filled)
 $("#nameInput").on('focusout', function(){
 if(isNaN($(this).val())){
 if(!$(this).next(".error").length){
 $(this).after("<span class='error'> Please input a number<span>");
 }
 }else{
 $(this).next(".error").remove();
 }
 });
 </script>

9. Validate if user input is a valid phone number

The code validates if the user inserted a correct phone number. If the given criteria is not matched then an error will be shown. The criteria is given as following. All valid:

• 1 800 5551212
• 800 555 1212
• 8005551212
• 18005551212
• +1800 555 1212 extension65432
• 800 5551212 ext3333

Invalid #s

• 234-911-5678
• 314-159-2653
• 123-234-5678

 <input type="text" id="phoneInput">
 <script type="text/javascript">
 // isValidPhone: check if the value passed is a valid phone number (True if valid, false if invalid)
 phoneRegex = /(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]??)\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)([2-9]1[02-9]??|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})\s*(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+)\s*)?$/i;
 var html = "";
 html += "<span class='error'> Please insert a valid phone number<span>";
 html += "<div>"
 html += "<ul>"
 html += "<li>1 800 5551212</li>"
 html += "<li>800 555 1212</li>"
 html += "<li>8005551212</li>"
 html += "<li>18005551212</li>"
 html += "<li>+1800 555 1212 extension65432</li>"
 html += "<li>800 5551212 ext3333</li>"
 html += "<li><h1>Invalid #s</h1></li>"
 html += "<li>234-911-5678</li>"
 html += "<li>314-159-2653</li>"
 html += "<li>123-234-5678</li>"
 html += "</ul>"
 html += "</div>"

 $("#phoneInput").on('focusout', function(){
 if(!phoneRegex.test($(this).val())){
 if(!$(this).next(".error").length){
 $(this).after(html);
 }
 }else{
 $(this).next(".error").remove();
 }
 });

 </script>