Question

我有一个包含三个输入的表单，一个用于City，State和Zipcode。使用javascript我需要一种简单的方法来检查City的输入是否包含值。如果输入确实包含值，那么我需要检查State是否包含值。如果city包含值，但状态没有，则需要触发一个警告框，要求用户进入状态。

这是我的表格代码，提前致谢!!

<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

我们让用户先输入zipcode，然后自动填写城市和州。以下是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");
});

//]] GT; 邮政编码距离

Answer 2

最好使用HTML5 required表单字段属性。我为您创建了jsfiddle。

Answer 3

请注意，由于默认情况下选择了Alabama，因此它们将始终选择状态。您可以添加没有值的选项和标记为“选择状态”来更改此选项。有了这个建议，你的城市输入了一个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捕获元素。

javascript表单验证。检查输入

4 个答案: