javascript表單驗證。 檢查輸入

Question

我有一個包含三個輸入的表單，一個輸入用於城市，州和郵政編碼。 使用javascript，我需要一種簡單的方法來檢查City的輸入是否包含值。 如果輸入中確實包含一個值，那么我需要檢查State是否包含一個值。 如果城市包含一個值，但州沒有，那么我需要觸發一個警告框，要求用戶輸入州。

這是我的表單代碼，在此先謝謝！！

<form action="home.php" method="post" name="location">
     Please enter....<br /><br /><label>city: 
     <input type="text" name="city" size="10"/></label>
     <br /><label>state: 
     <select id="state" name="state">
         <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></label><br />
     or <br />zipcode 
     <input type="text" name="zipcode" size="6" /><br />
     <br /><input type="submit" value="search" />
</form>`

Answer 1

我們讓用戶首先輸入郵政編碼，然后自動填寫城市和州。 以下是zipcodeapi.com/examples中的代碼：

<script type="text/javascript">//<![CDATA[
$(function() {
    // IMPORTANT: Fill in your client key
    var clientKey = "js-9qZHzu2Flc59Eq5rx10JdKERovBlJp3TQ3ApyC4TOa3tA8U7aVRnFwf41RpLgtE7";

    var cache = {};
    var container = $("#example1");
    var errorDiv = container.find("div.text-error");

    /** Handle successful response */
    function handleResp(data)
    {
        // Check for error
        if (data.error_msg)
            errorDiv.text(data.error_msg);
        else if ("city" in data)
        {
            // Set city and state
            container.find("input[name='city']").val(data.city);
            container.find("input[name='state']").val(data.state);
        }
    }

    // Set up event handlers
    container.find("input[name='zipcode']").on("keyup change", function() {
        // Get zip code
        var zipcode = $(this).val().substring(0, 5);
        if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
        {
            // Clear error
            errorDiv.empty();

            // Check cache
            if (zipcode in cache)
            {
                handleResp(cache[zipcode]);
            }
            else
            {
                // Build url
                var url = "https://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians";

                // Make AJAX request
                $.ajax({
                    "url": url,
                    "dataType": "json"
                }).done(function(data) {
                    handleResp(data);

                    // Store in cache
                    cache[zipcode] = data;
                }).fail(function(data) {
                    if (data.responseText && (json = $.parseJSON(data.responseText)))
                    {
                        // Store in cache
                        cache[zipcode] = json;

                        // Check for error
                        if (json.error_msg)
                            errorDiv.text(json.error_msg);
                    }
                    else
                        errorDiv.text('Request failed.');
                });
            }
        }
    }).trigger("change");
});

//]]>郵政編碼距離

Answer 2

最好使用HTML5必需的表單字段屬性。 我為您創建jsfiddle 。

Answer 3

請注意，就目前情況而言，由於默認情況下選擇了阿拉巴馬州，因此他們將始終選擇狀態。 您可以添加沒有值的選項和“選擇狀態”標簽來更改此設置。 采納了這些建議，並在城市輸入中輸入了一個ID“城市”

var city = document.getElementById('city'),
    state = document.getElementById('state'),
    cityFilled = city.value !== ''
    stateBlank = state.value ==='';

if(cityFilled && stateBlank){
  alert("Enter a zipcode, chump");
}

Answer 4

使用純js，您可以將代碼編寫為

var val = document.getElementById("name").value; // get value
if(val == "") { // check its value, if null
  alert("please write something here"); // alert the user..
}

並對每個輸入進行類似的操作。

您需要將id添加到每個元素中，以使JS捕獲該元素。