FORM validation and e-mail validation

AndieB · December 31, 2008

Hi all Gurus!

I need help.

I am coding a page in PHP and of course it contains FORMS that users needs to fill out. Since Javascript could be used as a FIRST step to check that the input is VALID I would like to use this functionality.

One validation I'd like to do is to validate that ALL required fileds are filled out. The second validation I'd like to perform is that the entered e-mail address is valid. Checking that a @ exists AND that there is at least a . (dot) after the @ character, with at least TWO characters in the "domain name".

I have two short scripts that I've found and want to use, they are as follows:

FORM VALIDATION

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false;}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false;}
}
}

E-MAIL VALIDATION

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false;}
else {return true;}
}
}

In one of my FORMS, I have on the SUBMIT entered the following:

<input type="reset" name="reset" value=<?php echo "\"" . $language_pack["event_pre-reg_button_clear"] . "\"" ?> /> <input type="submit" name="submit" value=<?php echo "\"" . $language_pack["event_pre-reg_button_next"] . "\"" ?> onsubmit="return validate_form(this)" />

Now, I am stuck at the following:

[*]How do I make sure that the E-mail validation is performed at the same time as the complete FORM?

[*]As is now, there is not check at all... what can be wrong?

I am very thankful for any kind of help in this matter!

Sincerely,

Andreas

Psycho · December 31, 2008

There are many, many posts with the same questin in this forum. But. I'll reiterrate the basics.

The onsubmit action should go in the form tag, not the submit button tag. A user can submit a form by pressing the eneter key and that would bypass the onsubmit trigger if put in the submit button.

The current functionality you have would require ALL fields to have input. You don't state if all fields are reuired. I always prefer to explicitly check the fields that need to be checked.

Here's how I would do this:

<html>
<head>

<style>
  .error { color: #ff0000; }
</style>

<script type="text/javascript">

function validate_form(formObj)
{
    var errors = new Array();

    if (!formObj.uname.value)
    {
        errors[errors.length] = 'Name is required.';        
    }

    if (!formObj.address.value)
    {
        errors[errors.length] = 'Address is required.';        
    }

    if (!formObj.email.value)
    {
        errors[errors.length] = 'Email is required.';        
    }
    else if (!validEmail(formObj.email.value))
    {
        errors[errors.length] = 'Email is not a valid format.';        
    }

    //There were errors
    if (errors.length>0)
    {
        var errorMsg = 'The following errors occured:';
        for (var i=0; i<errors.length; i++)
        {
            errorMsg += '\n - ' + errors[i];
        }
        alert(errorMsg);
        return false;
    }
}

function testEmail(fieldObj)
{
    if (!validEmail(fieldObj.value))
    {
        fieldObj.focus();
        fieldObj.select();
        alert('The email addred is not in a valid format.');
        return false;
    }

    return true;
}

function validEmail(emailStr)
{
    //Return true/false for valid/invalid email
    formatTest = /^[-\w+]+(\.[-\w+]+)*@[-a-z\d]{2,}(\.[-a-z\d]{2,})*\.[a-z]{2,6}$/i
    lengthTest = /^(.{1,64})@(.{4,255})$/
    return (formatTest.test(emailStr) && lengthTest.test(emailStr));
}

</script>

</head>

<body>

<form name="test" onsubmit="return validate_form(this);">
<b>Please fill out the form:</b>
<br />
<span class="error">*</span> required fields
<br /><br />
<span class="error">*</span> Name: <input type="text" name="uname"><br />
<span class="error">*</span> Address: <input type="text" name="address"><br />
Phone: <input type="text" name="phone"><br />
<span class="error">*</span> Email: <input type="text" name="email" onblur="testEmail(this);"><br />
<br />
<button type="submit">Submit</button>

</form>

</body>
</html>

Sign In

FORM validation and e-mail validation

Recommended Posts

AndieB

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information