Validate a form using JavaScript

Question

I am a beginner and I have written a code for validating the form as:

function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("First name must be filled out");
return false;
  }}
  <!-- html part-->
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><br>

The problem with this code is pressing submit button triggers the validateForm function. How to call the function when the object losses focus?

I have edited the question now. I don't know why I got a down vote and no one is mentioning anything while giving a down vote. It could be helpful If they could state the reasons and then down vote it. — NewUser
– NewUser, Commented Aug 31, 2012 at 15:22

NewUser · Accepted Answer · 2012-09-26 17:15:31Z

2

This is the exact solution to my problem. Where the user gets some kind of notification when the object losses focus:

<script>
function validate(){
var y = document.getElementById("errorResponse");
var x=document.forms["myForm"]["fname"].value;
    if (x==null || x==""){
        y.innerHTML = "Error";
    }
}
</script>

The HTML form is:

<form name="myForm">
First name: <input type="text" name="fname" onBlur = "validate()">
<div id = "errorResponse"></div>
<input type="submit" value="Submit">
</form>

The div can be designed in CSS to red color to get user attention and many more tricks can be played.

edited Sep 26, 2012 at 17:15

answered Sep 2, 2012 at 5:54

NewUser

3,84511 gold badges62 silver badges85 bronze badges

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

4 Comments

Captain Jack Sparrow Over a year ago

that does not mean my solution is wrong and you'll take my +1 back. :)

NewUser Over a year ago

Oye!! I have not taken your +1 back by mistakenly I have clicked on the other link. I am not sure how the it was clicked.

NewUser Over a year ago

I am facing a ban in this site so I was making my questions more effective such that I could gain few upvotes and ban could be lifted.

NewUser Over a year ago

Good joke.. I dont know if I will click twice then does +1 get reverted? I have never tried.

Captain Jack Sparrow · Accepted Answer · 2012-05-19 06:35:04Z

1

replace your input element's code by following

<input type="text" onblur="return validateForm();" name="fname">

i guess thats what you are looking for

answered May 19, 2012 at 6:35

Captain Jack Sparrow

4493 silver badges9 bronze badges

Comments

Guidhouse · Accepted Answer · 2012-05-19 08:51:44Z

<html>
<head>
<script type="text/javascript">
      function validateForm(oForm){
    var els = oForm.elements;
    for(var i = 0; i < els.length; i++){
       if('string' === typeof(els[i].getAttribute('data-message'))){
          return valEl(els[i]);
       }
    }
} 

function valEl(el){
    var method = el.getAttribute('data-valMethod');
    if('req' === method && (el.value === null || el.value === '')){
           alert(el.getAttribute('data-message'));
           return false;
    }
} 
</script>
</head>
<body>
<form name="myForm" action="#" onsubmit="return validateForm(this)" method="post">
First name: 
    <input data-message="First name must be filled out" data-valMethod="req" onchange="return valEl(this)"; name="fname"><br />
<input type="submit" value="Submit">
</form>
</body>

</html>

I have Split it in one function that can validate the elements on "onchange" and another one that fires the validations for each element on form.onsubmit(), if there's the required data-message attribute on a form element.
Since HTML5 the Data-* attributes are very handy for these things :-)

This way you can avoid having to store the name of the form and elements in the validation script, since you pass references to the elements themselfes instead. Which is always a good thing.

From here you can expand the valEl-function to accommodate other types of validation.

Only limitation so far is that there can be only one type of validation per element, but that should be easy enough to get around.

Happy coding. /G

PS http://jsfiddle.net/ePPnn/11/ for sample code

Thank a lot but I wanted something which will not require pressing submit button.. onblur solves this.

Collectives™ on Stack Overflow

Validate a form using JavaScript

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related