javascript - 警报用户字段必须为空

Question

问题:我希望能够在特定字段为空时提醒用户。表单的外观如下:

当用户输入邮政编码并选择搜索时，我希望显示一个弹出窗口，提醒用户选择距离而不显示结果。如果用户输入医院名称和城市下拉菜单，我不希望出现警报。仅当输入邮政编码并选择搜索按钮时。

表格如下:

  <div class="panel panel-default">
<div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
        <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>

        <div class="form-group">
        <select class="form-control" id="city" ng-model="searchParam.City">
        <option disabled="disabled" selected="selected" value="">City</option>  
        <option value=""></option>
                      <cfoutput query="HospCityFind">
                      <option value=#officecity#>#officecity#</option>
                    </cfoutput> 
                  </select></div>

        <hr />
        <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>

    <div class="row">
        <div class="col-xs-7 no-right-padding">
            <div class="form-group">
                <div class="input-group">
                    <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
                        <option></option><option >5</option><option>10</option><option>15</option><option>20</option>
                    </select>
                    <div class="input-group-addon">miles</div>
                </div>
            </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
            <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
        </div>
    </div>

        <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
    </form>
</div>

这是当里程为空时发出警报的脚本:

function validateForm() {
    var x = document.forms["UrgentCareSearch"]["distance"].value;
    if (x == "" || x=="null") {
        alert("Please select distance");
        return false;
    }

更新

我已经完成了以下操作，但它仍然无法按照我想要的方式工作(即在输入搜索按钮和用户输入邮政编码时显示警报。这意味着一旦用户输入邮政编码代码并单击搜索按钮填充结果，将出现警报，通知选择里程，并且直到用户输入多少英里并再次单击搜索后才会显示结果):

function validateForm() {
        var x = document.forms["UrgentCareSearch"]["miles"].value;
        var $zip = $('#zip');
        if ((x == "" && $zip != "") ||(x=="null" && $zip != "")) {
            alert("Please select distance");
            return false;
        }

这就是我使用时所需的:

  <div class="panel panel-default">
<div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return checkTextField()">
        <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>

        <div class="form-group">
        <select class="form-control" id="city" ng-model="searchParam.City">
        <option disabled="disabled" selected="selected" value="">City</option>  
        <option value=""></option>
                      <cfoutput query="HospCityFind">
                      <option value=#officecity#>#officecity#</option>
                    </cfoutput> 
                  </select></div>

        <hr />
        <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>

    <div class="row">
        <div class="col-xs-7 no-right-padding">
            <div class="form-group">
                <div class="input-group">
                    <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
                         <option value=""></option><option >5</option><option>10</option><option>15</option><option>20</option>
                    </select>
                    <div class="input-group-addon">miles</div>
                </div>
            </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
            <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
        </div>
    </div>

        <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
    </form>
</div>

Answer 1

将 required 添加到每个 input 或 select 元素中，如果它们留空，将阻止表单提交

<div class="panel panel-default">
<div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
        <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" required /></div>

        <div class="form-group">
        <select class="form-control" id="city" ng-model="searchParam.City" required>
        <option disabled="disabled" selected="selected" value="">City</option>  
        <option value=""></option>
                      <cfoutput query="HospCityFind">
                      <option value=#officecity#>#officecity#</option>
                    </cfoutput> 
                  </select></div>

        <hr />
        <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>

    <div class="row">
        <div class="col-xs-7 no-right-padding">
            <div class="form-group">
                <div class="input-group">
                    <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
                        <option></option><option >5</option><option>10</option><option>15</option><option>20</option>
                    </select>
                    <div class="input-group-addon">miles</div>
                </div>
            </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
            <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
        </div>
    </div>

        <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
    </form>

或者可以jquery触摸看看这个

首先给你的表单一个id让我们说myform

$(document).ready(function()
{
    $('#myform').submit(function()
    {
        var name = $("#hospital").val();
        var name = $("#city").val();
        if(name == "" || name == " ")
        {
            alert("Please enter name");
            return false;
        }
        if(city == "" || city== " ")
        {
            alert("Please enter city");
            return false;
        }

        //Just like this and at the end when you are satisfied
        $(this).submit();
    });
});