Form Validation JavaScript Code

This script for a variety of checks in an effort to ensure that the field is filled correctly. Use forms validation to avoid users to fill in omissions, or reduce unnecessary people feel free to submit form.

For example, for the URL field, it checks to see if 'http://' is present, and for the e-mail address it looks for the @ symbol. See the comments for how to vary the validation requirements, and how to make the script 'live'; as it is set up at present it just returns a message that all entries are verified OK.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="JavaScript" type="text/javascript">
<!--    // hide script from old browsers

// simple test for address format
function testMAIL(form, Ctrl) {
    if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1) {
        validatePrompt (Ctrl, "Enter a valid email address")
        return (false);
    } else
        return (true);
}

// simple test for URL format
function testURL(form, Ctrl) {
    if (Ctrl.value == "" || Ctrl.value.indexOf("http://",0) == -1) {
        validatePrompt (Ctrl, "Please provide a valid URL")
        return (false);
    } else
        return (true);
}

// simple test for title existance
function testTITLE(form, Ctrl) {
    if (Ctrl.value == "") {
        validatePrompt (Ctrl, "Please provide your page's title")
        return (false);
    } else
        return (true);
}

// simple test for password existance
function testPASSWD(form, Ctrl) {
    if (Ctrl.value.length < 4 || Ctrl.value.indexOf(' ',0) != -1) {
        validatePrompt (Ctrl, "Your password must be at least 4 characters long and contain no whitespace.")
        return (false);
    } else
        return (true);
}

// simple test for keywords existance
function testKEYS(form, Ctrl) {
    if (Ctrl.value == "") {
        validatePrompt (Ctrl, "You may enter up to 20 keywords.")
        return (true);  // was: false, now field optional
    } else
        return (true);
}

// simple test for description existance
function testDESC(form, Ctrl) {
    if (Ctrl.value == "") {
        validatePrompt (Ctrl, "You may enter a description of your site.")
        return (true);  // was: false, now field optional
    } else
        return (true);
}

// test all fields
//      abort submit on error
//      submit only if all fields pass tests
//
function runSubmit (form)  {
    if (!testURL(form, form.url)) return;
    if (!testTITLE(form, form.title)) return;
    if (!testMAIL(form, form.mail)) return;
    if (!testPASSWD(form, form.pw)) return;
//        if (!testKEYS(form, form.keywords)) return;
//        if (!testDESC(form, form.desc)) return;
    alert ("All entries verified OK!");
    //form.submit();       // un-comment to submit form
    return;
}

// support routine used during tests
function validatePrompt (Ctrl, PromptStr) {
    alert (PromptStr)
    Ctrl.focus();
    return;
}

// called on document load
function loadDoc() {
    // initial focus; use if needed
    //document.join.url.focus ();
    return;
}

// end hiding from old browsers -->
</script>

Insert this code into <body> tags

<form action="" method="POST" name="join">
<!-- Fill in actual HREF for post -->
<table border="1">
        <tr>
            <th colspan="2" colstart="1">These fields are
            required:</th>
        </tr>
        <tr>
            <td align="center" colstart="1">Your page's URL:</td>
            <td align="center" colstart="2"><input type="text"
            size="50" name="url"></td>
        </tr>
        <tr>
            <td align="center" colstart="1">Your page's title:</td>
            <td align="center" colstart="2"><input type="text"
            size="50" name="title"></td>
        </tr>
        <tr>
            <td align="center" colstart="1">Your e-mail address:</td>
            <td align="center" colstart="2"><input type="text"
            size="30" name="mail"></td>
        </tr>
        <tr>
            <td align="center" colstart="1">Password:</td>
            <td align="center" colstart="2"><input type="text"
            size="10" name="pw"></td>
        </tr>
        <tr>
            <td align="center" colspan="2" colstart="1">(The
            password allows you to change info about your site
            later). <b>Please do not forget it!</b></td>
        </tr>
        <tr>
            <th colspan="2" colstart="1">These fields are
            optional:</th>
        </tr>
        <tr>
            <td align="center" colstart="1">Enter up to 20
            keywords about your site:</td>
            <td align="center" colstart="2"><input type="text"
            size="50" name="keywords"></td>
        </tr>
        <tr>
            <td align="center" colstart="1">Enter a short
            description of your site.</td>
            <td align="center" colstart="2"><textarea name="desc"
            rows="5" cols="42" wrap="soft"></textarea></td>
        </tr>
        <tr>
            <td align="center" colspan="2" colstart="1"><input
            type="button" name="Submit"
            value="Submit this information"
            onclick="runSubmit(this.form)"> </td>
        </tr>
    </table>
</form>

Instruction:

Modify the table style to suit your site.

Webmaster » Web Programming » JavaScript » Forms »

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links