Search code examples
javascripthtmlpostal-code

How to require a Postal Code to be Numeric if a Certain Country is Selected in JavaScript w/HTML

I'm coding a simple form with html w/javascript and have been working on this one aspect for about two days. I've seen numerous ideas across the internet but none seem to give me an idea of what to do. So hoping you guys can help.

Basically what has to happen is when USA is selected the form should require that a numeric postal code be entered or else it refuses submission. Below is my code so far, sorry its pretty lengthy.

        <label id="stateLabel" for="state">State</label>
        <select name="state" id="state" onchange="validateState()">
            <option value="">Select a State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
        <div id="stateError" class="errorMessage"></div>
        <br />

        <label id="countryLabel" for="country">Country</label>
        <select name="country" id="country" onchange="validateCountry()">
            <option value="">Select a Country</option>
            <option value="US">United States of America</option>
            <option value="CAN">Canada</option>
            <option value="MEX">Mexico</option>
        </select>
        <div id="countryError" class="errorMessage"></div>
        <br />

        <label id="postCodeLabel" for="postCode">Postal Code</label>
        <input type="text" name="postCode" id="postCode" onblur="validatePostCode()" onfocus="resetPostCode()" />
        <div id="postCodeError" class="errorMessage"></div>
        <br />

Javascript

       var lStateLabel;
       var ddState;
       var dStateError;

       var lCountryLabel;
       var ddCountry;
       var dCountryError;

       var lPostCodeLabel;
       var iPostCode;
       var dPostCodeError;

       function validatePostCode()
       {
        if((isNaN(iPostCode.value) == false) && (iPostCode.value.length == 5))
       {
         resetPostCode();

          return true;
        }
       else
       {
        lPostCodeLabel.style.color = "red";
        dPostCodeError.innerHTML = "Your Postal Code must be numeric and 5 integers long.";

        return false;
        }
       }
Solution

  • Here, I think this is what you're looking for:

    HTML:

    <form name="myForm" action="assignment-js-form-success.html" onsubmit="return validateForm()" method="post">

    <label id="firstNameLabel" for="firstName">First Name</label>
    <input type="text" name="firstName" id="firstName" onblur="validateFirstName()" onfocus="resetFirstName()" />
    <div id="firstNameError" class="errorMessage"></div>
    <br />

    <label id="lastNameLabel" for="lastName">Last Name</label>
    <input type="text" name="lastName" id="lastName" onblur="validateLastName()" onfocus="resetLastName()" />
    <div id="lastNameError" class="errorMessage"></div>
    <br />

    <label id="addressLabel" for="address">Address</label>
    <input type="text" name="address" id="address" onblur="validateAddress()" onfocus="resetAddress()" />
    <div id="addressError" class="errorMessage"></div>
    <br />

    <label id="cityLabel" for="city">City</label>
    <input type="text" name="city" id="city" onblur="validateCity()" onfocus="resetCity()" />
    <div id="cityError" class="errorMessage"></div>
    <br />

    <label id="stateLabel" for="state">State</label>
    <select name="state" id="state" onchange="validateState()">
        <option value="">Select a State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
    <div id="stateError" class="errorMessage"></div>
    <br />

    <label id="countryLabel" for="country">Country</label>
    <select name="country" id="country" onchange="validateCountry(); if (iPostCode.value !== '') validatePostCode();">
        <option value="">Select a Country</option>
        <option value="US">United States of America</option>
        <option value="CAN">Canada</option>
        <option value="MEX">Mexico</option>
    </select>
    <div id="countryError" class="errorMessage"></div>
    <br />

    <label id="postCodeLabel" for="postCode">Postal Code</label>
    <input type="text" name="postCode" id="postCode" onblur="validatePostCode()" onfocus="resetPostCode()" />
    <div id="postCodeError" class="errorMessage"></div>
    <br />

    <label id="emailLabel" for="email">Email Address</label>
    <input type="text" name="email" id="email" value="" onblur="validateEmail()" onfocus="resetEmail()" />
    <div id="emailError" class="errorMessage"></div>
    <br />

    <label id="passwordLabel" for="password">Password</label>
    <input type="text" name="password" id="password" onblur="validatePassword()" onfocus="resetPassword()" />
    <div id="passwordError" class="errorMessage"></div>
    <br />

    <label id="passwordConfirmLabel" for="passwordConfirm">Confirm Password</label>
    <input type="text" name="passwordConfirm" id="passwordConfirm" onblur="validatePasswordConfirm()" onfocus="resetPasswordConfirm()" />
    <div id="passwordConfirmError" class="errorMessage"></div>
    <br />

    <input type="submit" value="Submit" id="submitButton" value="Check"/>
</form>

<div id="errorMessage"></div>

    JavaScript:

    function initialization() {

    lFirstNameLabel = document.getElementById("firstNameLabel");
    iFirstName = document.getElementById("firstName");
    dFirstNameError = document.getElementById("firstNameError");

    lLastNameLabel = document.getElementById("lastNameLabel");
    iLastName = document.getElementById("lastName");
    dLastNameError = document.getElementById("lastNameError");

    lAddressLabel = document.getElementById("addressLabel");
    iAddress = document.getElementById("address");
    dAddressError = document.getElementById("addressError");

    lCityLabel = document.getElementById("cityLabel");
    iCity = document.getElementById("city");
    dCityError = document.getElementById("cityError");

    lStateLabel = document.getElementById("stateLabel");
    ddState = document.getElementById("state");
    dStateError = document.getElementById("stateError");

    lCountryLabel = document.getElementById("countryLabel");
    ddCountry = document.getElementById("country");
    dCountryError = document.getElementById("countryError");

    lPostCodeLabel = document.getElementById("postCodeLabel");
    iPostCode = document.getElementById("postCode");
    dPostCodeError = document.getElementById("postCodeError");

    lEmailLabel = document.getElementById("emailLabel");
    iEmail = document.getElementById("email");
    dEmailError = document.getElementById("emailError");

    lPasswordLabel = document.getElementById("passwordLabel");
    iPassword = document.getElementById("password");
    dPasswordError = document.getElementById("passwordError");

    lPasswordConfirmLabel = document.getElementById("passwordConfirmLabel");
    iPasswordConfirm = document.getElementById("passwordConfirm");
    dPasswordConfirmError = document.getElementById("passwordConfirmError");

} // end initialization()

window.validateForm = function() {

    noErrors = true;

    if (validateFirstName() == false) noErrors = false;
    if (validateLastName() == false) noErrors = false;
    if (validateAddress() == false) noErrors = false;
    if (validateCity() == false) noErrors = false;
    if (validateState() == false) noErrors = false;
    if (validateCountry() == false) noErrors = false;
    if (validatePostCode() == false) noErrors = false;
    if (validateEmail() == false) noErrors = false;
    if (validatePassword() == false) noErrors = false;
    if (validatePasswordConfirm() == false) noErrors = false;

    return noErrors;

}; // end validateForm()

window.validateFirstName = function() {
    if (iFirstName.value.length > 1) {
        resetFirstName();
        return true;
    } else {
        lFirstNameLabel.style.color = "red";
        dFirstNameError.innerHTML = "First Name should be more than one character";
        return false;
    } // end if
}; // end validateFirstName()

window.resetFirstName = function() {
    lFirstNameLabel.style.color = "black";
    dFirstNameError.innerHTML = "";
}; // end resetFirstName()

window.validateLastName = function() {
    if (iLastName.value.length > 1) {
        resetLastName();
        return true;
    } else {
        lLastNameLabel.style.color = "red";
        dLastNameError.innerHTML = "Last Name should be more than one character!";
        return false;
    } // end if
}; // end validateLastName()

window.resetLastName = function() {
    lLastNameLabel.style.color = "black";
    dLastNameError.innerHTML = "";
}; // end resetLastName()

window.validateAddress = function() {
    if (iAddress.value.length > 1) {
        resetAddress();
        return true;
    } else {
        lAddressLabel.style.color = "red";
        dAddressError.innerHTML = "Address must be greater than one character.";
        return false;
    } // end if
}; // end validateAddress()

window.resetAddress = function() {
    lAddressLabel.style.color = "black";
    dAddressError.innerHTML = "";
}; // end resetAddress()

window.validateCity = function() {
    if (iCity.value.length > 1) {
        resetCity();
        return true;
    } else {
        lCityLabel.style.color = "red";
        dCityError.innerHTML = "You must input a valid city name.";
        return false;
    } // end if
}; // end validateCity()

window.resetCity = function() {
    lCityLabel.style.color = "black";
    dCityError.innerHTML = "";
}; // end resetCity()

window.validateState = function() {
    if (ddState.selectedIndex > 0) {
        resetState();
        return true;
    } else {
        lStateLabel.style.color = "red";
        dStateError.innerHTML = "You must select a state!";
        return false;
    } // end if
}; // end validateState()

window.resetState = function() {
    lStateLabel.style.color = "black";
    dStateError.innerHTML = "";
}; // end resetState()

window.validateCountry = function() {
    if (ddCountry.selectedIndex > 0) {
        resetCountry();
        return true;
    } else {
        lCountryLabel.style.color = "red";
        dCountryError.innerHTML = "You must select a country!";
        return false;
    } // end if
}; // end validateCountry()

window.resetCountry = function() {
    lCountryLabel.style.color = "black";
    dCountryError.innerHTML = "";
}; // end resetCountry()

window.validatePostCode = function() {

    // get currently selected country
    var countrySelectElem = document.getElementById('country');
    var countryValue = countrySelectElem.options[countrySelectElem.selectedIndex].value;

    // if US, require 5-digit postal code
    if (countryValue === 'US') {
        if (isNaN(iPostCode.value) == false && iPostCode.value.length == 5) {
            resetPostCode();
            return true;
        } else {
            lPostCodeLabel.style.color = "red";
            dPostCodeError.innerHTML = "Your US Postal Code must be numeric and 5 integers long.";
            return false;
        } // end if
    } else {
        // require non-empty for other countries
        if (iPostCode.value !== '') {
            resetPostCode();
            return true;
        } else {
            lPostCodeLabel.style.color = "red";
            dPostCodeError.innerHTML = "Your Postal Code must be non-empty.";
            return false;
        } // end if
    } // end if

}; // end validatePostCode()

window.resetPostCode = function() {
    lPostCodeLabel.style.color = "black";
    dPostCodeError.innerHTML = "";
}; // end resetPostCode()

window.validateEmail = function() {
    var pattern = /^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9+_.-]+)\.([a-zA-Z]+)$/;
    if (pattern.test(iEmail.value)) {
        resetEmail();
        return true;
    } else {
        lEmailLabel.style.color ="red";
        dEmailError.innerHTML = "Valid Email address is required!";
        return false;
    } // end if
}; // end validateEmail()

window.resetEmail = function() {
    lEmailLabel.style.color = "black";
    dEmailError.innerHTML = "";
}; // end resetEmail()

window.validatePassword = function() {
    if (iPassword.value.length >= 6) {
        resetPassword();
        return true;
    } else {
        lPasswordLabel.style.color = "red";
        dPasswordError.innerHTML = "Password should be at least 6 characters!";
        return false;
    } // end if
}; // end validatePassword()

window.resetPassword = function() {
    lPasswordLabel.style.color = "black";
    dPasswordError.innerHTML = "";
}; // end resetPassword()

window.validatePasswordConfirm = function() {
    if (iPasswordConfirm.value === iPassword.value) {
        resetPasswordConfirm();
        return true;
    } else {
        lPasswordConfirmLabel.style.color = "red";
        dPasswordConfirmError.innerHTML = "Passwords must match!";
        return false;
    } // end if
}; // end validatePasswordConfirm()

window.resetPasswordConfirm = function() {
    lPasswordConfirmLabel.style.color = "black";
    dPasswordConfirmError.innerHTML = "";
}; // end resetPasswordConfirm()

// actual onload code
initialization();

    http://jsfiddle.net/gpyd956e/

    The relevant code is this:

    window.validatePostCode = function() {

    // get currently selected country
    var countrySelectElem = document.getElementById('country');
    var countryValue = countrySelectElem.options[countrySelectElem.selectedIndex].value;

    // if US, require 5-digit postal code
    if (countryValue === 'US') {
        if (isNaN(iPostCode.value) == false && iPostCode.value.length == 5) {
            resetPostCode();
            return true;
        } else {
            lPostCodeLabel.style.color = "red";
            dPostCodeError.innerHTML = "Your US Postal Code must be numeric and 5 integers long.";
            return false;
        } // end if
    } else {
        // require non-empty for other countries
        if (iPostCode.value !== '') {
            resetPostCode();
            return true;
        } else {
            lPostCodeLabel.style.color = "red";
            dPostCodeError.innerHTML = "Your Postal Code must be non-empty.";
            return false;
        } // end if
    } // end if

}; // end validatePostCode()

    Because the validation of the postal code depends on the currently-selected country, you have to retrieve it in the validation function and then branch on it. After that, you can do exactly the validation you need for each country.

    Also, in order to keep the postal code field error message up-to-date for country changes, I added this to the onchange handler for the country field:

    if (iPostCode.value !== '') validatePostCode();

    This dynamically re-validates the postal code field for changes to the country field, but only if the user has actually typed something into the postal code field (you wouldn't want a change to the country field to trigger a postal code error message if the user hasn't typed any postal code yet).

    I also made various fixes for things like typos and inconsistent function naming and calling, and adapted the code to jsFiddle, which I believe runs the JavaScript in a synthesized window.onload callback, requiring some changes to ensure true globalness where necessary.