JavaScript form validation for first name, last name and email address is displaying nothing - Stack Overflow

admin管理员组

文章数量:1389750

I am just copying my code:

HTML

<form id='test'>
Name *
    <input id="lname" type="text"><span id="wronglname" class="error">*This is a required field</span>
        Name *
    <input id="name" type="text"><span id="wrongname" class="error">*This is a required field</span>

Email*
    <input id="email" type="text"><span id="wrongemail" class="error">* Wrong Email Address</span>

    <div>
        <input type="submit" value="Submit">
    </div>
</form>

Javascript

function ValidateForm() {

    var hasError = false;

    if (document.getElementById('lname').value == "") {
        document.getElementById('lwrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }
        if (document.getElementById('name').value == "") {
        document.getElementById('wrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }

    if (document.getElementById('email').value.search(/^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/) == -1) {
        document.getElementById('wrongemail').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongemail').style.display = "none";   
    }

    return !hasError;
}


document.getElementById('test').onsubmit = ValidateForm;

CSS

.error {
    display:none;
    color:red;
}

I am getting no response at all, and whenever I check javascript console by chrome, it shows me also no error, I am not too sure what's wrong with my coding, can anyone help me out?

I am just copying my code:

HTML

<form id='test'>
Name *
    <input id="lname" type="text"><span id="wronglname" class="error">*This is a required field</span>
        Name *
    <input id="name" type="text"><span id="wrongname" class="error">*This is a required field</span>

Email*
    <input id="email" type="text"><span id="wrongemail" class="error">* Wrong Email Address</span>

    <div>
        <input type="submit" value="Submit">
    </div>
</form>

Javascript

function ValidateForm() {

    var hasError = false;

    if (document.getElementById('lname').value == "") {
        document.getElementById('lwrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }
        if (document.getElementById('name').value == "") {
        document.getElementById('wrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }

    if (document.getElementById('email').value.search(/^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/) == -1) {
        document.getElementById('wrongemail').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongemail').style.display = "none";   
    }

    return !hasError;
}


document.getElementById('test').onsubmit = ValidateForm;

CSS

.error {
    display:none;
    color:red;
}

I am getting no response at all, and whenever I check javascript console by chrome, it shows me also no error, I am not too sure what's wrong with my coding, can anyone help me out?

• javascript

Share Improve this question Follow edited Apr 17, 2014 at 23:58 Sunyatasattva 5,86033 gold badges2929 silver badges4040 bronze badges asked Apr 17, 2014 at 23:44 AcemiAcemi 17311 gold badge44 silver badges1313 bronze badges 4

• how are you calling the ValidateForm() function ..? – Sudhir Bastakoti Commented Apr 17, 2014 at 23:46
• 2 I assume the script is in <script> tags? – michael Commented Apr 17, 2014 at 23:47
• 1 @Sudhir see document.getElementById('test').onsubmit = ValidateForm; – michael Commented Apr 17, 2014 at 23:47
• @failed.down <script src="test.js"></script> and l put it on the last line of the body tag. – Acemi Commented Apr 17, 2014 at 23:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Here is your mistake:

if (document.getElementById('lname').value == "") {
        document.getElementById('lwrongname').style.display = "inline";
        hasError = true;
    }

Notice document.getElementById('lwrongname'), should be document.getElementById('wronglname').

本文标签：