having issues to validate form using JavaScript

Question

On this form when I enter the email address correctly and leaves the name field as a blank, the page is submitting and the javacript not running. Otherwise its working fine.

Please someone help me to solve this JavaScript.

function validateform(data)
{
    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
        }
        validField += "- Please Enter A Valid E-mail Address\n";
        alert(validField);
        return false;
}


<form name="data" onsubmit="return validateform(this);" action="some.php" method="post">
<div>
<label>Name:</label><input type="text" id="name" name="name" size="20"  maxlength="20"/></div>

<div>
<label>E- mail Address:</label><input type="text" id="email" name="email" size="20"  maxlength="30"/></div>

<input type="submit" name="submit" value="Start Now!"/>
</form>

Umesh Patil · Accepted Answer · 2012-03-09 11:41:12Z

You need little change in your code. Problem is because function validateform() always returning false irrespective of email validation. Test below working page along with your code. You should add alert and return false in else {} block.

<html> 
<head>  
<script type="text/javascript">
function validateform(data)
{
    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
     }
     else {
        validField += "- Please Enter A Valid E-mail Address\n";
        alert(validField);
        return false;
        }
}
</script> 
</head>
<body>
<form name="data" onsubmit="return validateform(this);" action="some.php" method="post">
<div>
<label>Name:</label><input type="text" id="name" name="name" size="20"  maxlength="20"/></div>
<div>
<label>E- mail Address:</label><input type="text" id="email" name="email" size="20"  maxlength="30"/></div>

<input type="submit" name="submit" value="Start Now!"/>
</form>
</body>
</html>

Simon West · Accepted Answer · 2012-03-09 11:42:48Z

0

You need to refactor your code a little bit. At the minute if the email address is valid your return true out of the function regardless of the name field.

function validateform(data) {
    var validField = "";
    var isValid = false;
    var namevalid = /^[a-zA-Z ]+$/;
    if (data.name.value == "") {
        validField += "- Please Enter Your Name\n";
    }
    else if (data.name.value.search(namevalid) == -1) { 
        validField += "- Entered Name contains Numbers or Symbols\n"; 
        }
    if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value))) {
        validField += "- Please Enter A Valid E-mail Address\n";
    };
    if (validField == "") {
        isValid = true;
    }
    if (!isValid) {
        alert(validField);
    }
    return isValid;
}

edited Mar 9, 2012 at 11:42

answered Mar 9, 2012 at 11:35

Simon West

3,7881 gold badge28 silver badges28 bronze badges

Comments

slash197 · Accepted Answer · 2012-03-09 11:34:06Z

0

You need to place your function between <script> tags, other than that this looks ok to me.

answered Mar 9, 2012 at 11:34

slash197

9,0246 gold badges44 silver badges71 bronze badges

1 Comment

Richard Over a year ago

He probably posted a snippet, otherwise he would see all the JS on the screen and know something is wrong.

Richard · Accepted Answer · 2012-03-09 11:44:40Z

I'm not quite sure why this is failing, but the function isn't called at all. Might be the onsubmit.

Why don't you use a library like jQuery? Have a look at this example, this works fine: http://jsfiddle.net/tR3XQ/1/

$("form[name=data]").submit(function(){

    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
    }
    validField += "- Please Enter A Valid E-mail Address\n";
    alert(validField);
    return false;

});

Mark Willis · Accepted Answer · 2012-03-09 11:52:32Z

0

You need to add a check for a value in validField for the email check otherwise it is ignored

if (validField.length = 0 && /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
  return true;
}
validField += "- Please Enter A Valid E-mail Address\n";
alert(validField);
return false;

answered Mar 9, 2012 at 11:52

Mark Willis

1,7511 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

having issues to validate form using JavaScript

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related