Question

I’m trying to make a form validation method. and I’m facing a couple of problems:

1. After submitting the form and the fields are not filled correctly, all the other inputs get erased.

2.The focus() is not working at all.

Here’s the html form:

    <form name ="reg" onsubmit ="return checkValidation(this)">
    <p><label for="name">שם</label><input type="text" name="name" id="name" /> </p>
    <p><label for="e-mail">אימייל</label><input type="text" name="email" id="email" /> </p>
    <p><label for="password">סיסמא</label><input type="password" name="password" id="password" /></p>
    <p><label for="sex">זכר</label><input type="radio" value="male"id="radio" name="radio" /></p>
    <p><label for="sex">נקבה</label><input type="radio" value="female" name="radio" id="radio" /></p>
    <p><label for="checkbox">אופנוע</label><input type="checkbox" name="bike" id="bike" value="Bike" /> </p>
    <p><label for="checkbox">מכונית</label><input type="checkbox" name="car" id="car" value="Car" /> </p>
    <p><label for="favorite">שחקן המועדף עליך</label>
    <select>
    <option value="פרקינס">דורון פרקינס</option>
    <option value="סופוקליס שחורציאניטיס">סופוקליס שחורציאניטיס</option>
    <option value="עומרי כספי">עומרי כספי</option>
    <option value="דייויד בלו">דייויד בלו</option>
    </select></p>       
    <p><label for="text"></label>
    <textarea  > רשום את הודעתך פה! </textarea></p>    
    <p><label for="reset"></label><input type="reset" name="reset" /></p>
    <p class="submit"><input type="submit" value="שלח"/></p>
</form>

And here’s the javascript code:

    <script type = "text/javascript">

    function checkValidation()
    {
        isValidName();
        isValidEmail();
        isValidPass();

    }
    function isValidName()
    {
        var check = false;
        var Allowed = "qwertyuiopasdfghjklzxcvbnm";
        var str = document.reg.name.value.toLowerCase();
        if(str == "")
        {
        alert("Enter your name!");
        reg.name.focus();
        return false;
        }

        for(i = 0;i<str.length;i++)
        {

            for(k = 0;k<Allowed.length;k++)
            {
                if(str[i] == Allowed[k])
                {
                    check = true;

                }
            }
            if(check == false)
            {
            alert("Please enter a valid name");
            reg.name.focus();
            return false;
            }
            check = false;
        }
        return true;

    }
    function isValidEmail()
    {
        str = reg.email.value;
        var lastAtPos = str.lastIndexOf('@');
        var lastDotPos = str.lastIndexOf('.');
        if (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf("..") == -1 
        && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2)
        {
            return true;
        }
        else
        {
            alert("Please enter a valid email");
            reg.email.focus();
            return false;
        }
    }
    function isValidPass()
    {
        var notAllowed = "./;'[]{}\()-=_|";
        var str = reg.password.value;
        if(str.length > 6)
        {
        alert("The password must be lower than 6 characters");
        reg.password.focus();
        return false;
        }
        for(i = 0;i<str.length;i++)
        {
            for(k = 0;k<notAllowed.length;k++)
            {
                if(str[i] == notAllowed[k])
                {
                alert("You cannot use the following letters: " +notAllowed);
                reg.password.focus();
                return false;
                }
            }
        }
        return true;
    }

</script>

Thanks alot for helpers!

Answer 1

1. The function checkValidation() does not return anything:

   <form name ="reg" onsubmit ="return checkValidation(this)">

You need to check each sub-function and return false ASAP.

function checkValidation() {
    var go = isValidName();
    if (go){
        go = isValidEmail();
    }
    if (go){
        go = isValidPass();
    }
    return go;
}

2: rather than var Allowed = "qwertyuiopasdfghjklzxcvbnm";, you should be using a regular expression and eliminate the costly loop you have later on.

3: Consider using a tested form validation framework like jQuery Validate.

4: I second @Dan's post on needing server-side validation.