CODEWITHSUNDEEP
javascripthtml
Aontaigh
Aontaigh

Reputation: 198

JavaScript Capital Letter Validation Issue

One's second name is required to start with a capital letter. If I type a capital letter at first, it succesfully submits.

The issue is, when I type a lower case letter, submit it, it throws the error message to the user which it is supposed to do. Though when I replace that lower case letter with an upper case letter and attempt to submit it once more, it still will not submit and still shows the user "Must Start With A Capital".

HTML:

<form name="registrationForm" id="registrationForm" method="get">
    <table cellspacing="5" border="0">
        <tr> 
            <td align="right">First Name:</td> 
            <td>
                <input type="text" name="firstName" id="firstName">
                <span id="firstNameError">*</span>
            </td> 
        </tr>
        <tr> 
            <td align="right">Second Name:</td> 
            <td>
                <input type="text" name="secondName" id="secondName">
                <span id="secondNameError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">Town:</td> 
            <td>
                <input type="text" name="town" id="town">
                <span id="townError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">Country:</td> 
            <td>
                <input type="text" name="country" id="country">
                <span id="countryError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">E-Mail Address:</td> 
            <td>
                <input type="text" name="emailAddress" id="emailAddress">
                <span id="emailAddressError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right"></td>
            <td><input type="button" id="submitRegistationForm" value="Submit"></td>
        </tr>
    </table>
</form>

JavaScript:

var $ = function (id) {
    return document.getElementById(id);
}

var validateRegistrationForm = function () {
    var isValid = true;

    //First Name Validation
    if ($("firstName").value == "") {
        $("firstNameError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("firstNameError").firstChild.nodeValue = "";
    }

    //Second Name Validation
    if ($("secondName").value == "") {
        $("secondNameError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else if ($("firstName").value[0].toUpperCase() != $("firstName").value[0]) {
        $("secondNameError").firstChild.nodeValue = "Must Start With A Capital";
        isValid = false;
    }  else {
        $("secondNameError").firstChild.nodeValue = "";
    }

    //Town Validation
    if ($("town").value == "") {
        $("townError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("townError").firstChild.nodeValue = "";
    }   

    //Country Validation
    if ($("country").value == "") {
        $("countryError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("countryError").firstChild.nodeValue = "";
    }       

    //E-Mail Validation
    if ($("emailAddress").value == "") {
        $("emailAddressError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("emailAddressError").firstChild.nodeValue = "";
    }   

    if (isValid) {
        $("registrationForm").submit();
    }
}

window.onload = function () {
    $("submitRegistationForm").onclick = validateRegistrationForm;
}

Upvotes: 0

Views: 230

Answers (2)

Galastun
Galastun

Reputation: 130

One thing I noticed is in your second name validation, you have an else if referencing your firstName. Try this:

if ($("secondName").value == "") {
    $("secondNameError").firstChild.nodeValue = "This Field Is Required";
    isValid = false;
} else if ($("secondName").value[0].toUpperCase() != $("#secondName").value[0]) {
    $("secondNameError").firstChild.nodeValue = "Must Start With A Capital";
    isValid = false;
}  else {
    $("secondNameError").firstChild.nodeValue = "";
}

Upvotes: 2

S1awek
S1awek

Reputation: 1783

You've got error in line 20, it should be:

} else if ($("secondName").value[0].toUpperCase() != $("secondName").value[0]) {

Upvotes: 1

Related Questions