Как требовать, чтобы почтовый индекс был числовым, если определенная страна выбрана в JavaScript с HTML

Question

Я кодирую простую форму с html w/javascript и работаю над этим одним аспектом в течение двух дней. Я видел множество идей в Интернете, но никто, кажется, не дает мне представления о том, что делать. Так надеемся, что вы, ребята, можете помочь.

В основном, когда США выбраны, форма должна требовать ввода числового почтового кода, иначе она откажется от отправки. Ниже мой код до сих пор, извините, его довольно много.

 <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; 
     } 
     } 

Answer 1

Здесь, я думаю, что это то, что вы ищете:

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/

Соответствующий код заключается в следующем:

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() 

Поскольку проверка почтового индекса зависит от страны, выбранной в данный момент, ее необходимо загрузить в функции проверки и затем развернуть на нее. После этого вы можете точно выполнить валидацию, необходимую для каждой страны.

Кроме того, для того, чтобы сохранить сообщение об ошибке почтового кода поля уточненных для изменения страны, я добавил это к onchange обработчику для поля страны:

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

Это динамически повторно проверяет поле почтового кода для изменений в поле страны, но только если пользователь действительно набрал что-то в поле почтового кода (вы не хотите, чтобы изменение в поле страны вызывало сообщение об ошибке почтового кода, если пользователь не набрал любой почтовый код еще).

Я также сделал различные исправления для таких вещей, как опечатки и непоследовательные функции именования и вызова, и адаптировал код к jsFiddle, который, как мне кажется, запускает JavaScript в синтезированном обратном вызове window.onload, требуя некоторых изменений, чтобы обеспечить истинную глобальность там, где это необходимо.

Answer 2

Устройству ZIP должно требоваться только при выборе США? В противном случае вы можете использовать ограничения проверки HTML для входных атрибутов, таких как max, min, required, type или даже pattern (для RegExp).