Validate Multiple Input fields using JavaScript

Question

I would like to do the validations for multiple input fields by using JavaScript and jQuery. I am getting validations for individual fields, but the page is loading when i click submit button, so the filled data is gone.

My Code is: HTML:

<form id="addadmin-form" name="addadmin-form" onsubmit="return addAdminValidation123();" method="POST" class="form-horizontal">
<div class="controls">
    <input name="name" id="name" type="text"/>
    <div id="name-error" class="validationerror">
    </div>
</div>
<div class="controls">
    <input name="qualification" id="qualification" type="text"/>
    <div id="qualification-error" class="validationerror">
    </div>
</div>
<div class="controls">
    <input name="desc" id="desc" type="text"/>
    <div id="desc-error" class="validationerror">
    </div>
</div>
<input type="submit" class="btn btn-primary" value="Save"/>

JavaScript:

function addAdminValidation123(){
  $('#addadmin-form').find('input[type="text"]').each(function(){
    var id=$(this).attr("id");
    if($(this).val()=="") {
      document.getElementById(""+id+"-error").innerHTML="PLEASE FILL OUT THIS FIELD !";    
      $('#'+id+'-error').css('display','block');
      return divTagDisplayHide(5000);
    }
  });
}

function divTagDisplayHide(time){
  $(".validationerror" ).each(function(){
    var $this = $(this);
    setTimeout(function() {            
      $this.hide();
    }, time);
  });
  return false;
}

have you tried .preventDefault() ?

OnlyMAJ
– OnlyMAJ

2014-12-25 06:15:33 +00:00
Commented Dec 25, 2014 at 6:15 — OnlyMAJ
– OnlyMAJ, Commented Dec 25, 2014 at 6:15

shyammakwana.me · Accepted Answer · 2014-12-25 07:14:53Z

1

Add the below jQuery code after your js functions.
And remove onsubmit handler from form tag

Here event.preventDefault(); will prevent form to submit and page loading.

// YOUR JS FUNCTIONS HERE 

$(document).on('submit', '#addadmin-form', function(event){
    event.preventDefault();
    addAdminValidation123();
});
// Still error occurs you can always debug through Firebug Console.

answered Dec 25, 2014 at 7:14

shyammakwana.me

5,7624 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shyammakwana.me Over a year ago

Welcome :) You can mark question as solved if it does.

jmore009 · Accepted Answer · 2014-12-25 06:23:26Z

0

you can do something along these lines. Check to see if each field is empty and if one is preventDefault to stop the form from submitting and show the error message

$("input[type=submit]").click(function(e){

  if($("#name").val() == ""){
    e.preventDefault();
    $("#name-error").text("Cant be empty")    
  }else{
    $("#name-error").text("")
  }

  if($("#qualification").val() == ""){
    e.preventDefault();
    $("#qualification-error").text("Cant be empty")    
  }else{
    $("#qualification-error").text("")
  }

  if($("#desc").val() == ""){
    e.preventDefault();
    $("#desc-error").text("Cant be empty")    
  }else{
    $("#desc-error").text("")
  }

});

FIDDLE

answered Dec 25, 2014 at 6:23

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

Comments

Ali · Accepted Answer · 2014-12-25 06:45:07Z

Your addAdminValidation123 function is not returning any value. This is why the page is allowing you to submit the form. When you are executing "return divTagDisplayHide(5000);" this is returning false for the inner function - the one that starts from "$('#addadminform').find('input[type="text"]').each(function(){"

Try the following to fix the problem.

function addAdminValidation123(){ var returnVal = true; $('#addadmin-form').find('input[type="text"]').each(function(){ var id=$(this).attr("id"); if($(this).val()=="") { document.getElementById(""+id+"-error").innerHTML="PLEASE FILL OUT THIS FIELD !"; $('#'+id+'-error').css('display','block'); returnVal = divTagDisplayHide(5000); } }); return returnVal; }

Collectives™ on Stack Overflow

Validate Multiple Input fields using JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related