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

Answer 2

根据我对您的问题陈述的理解，您可以在验证功能中执行以下操作。

function validateForm() {
    var miles = document.forms["UrgentCareSearch"]["distance"].value;
    var zip = document.forms["UrgentCareSearch"]["zip"].value;
    if (zip && !miles) {
        event.preventDefault(); // This will prevent the form submit
        alert("Please enter the Miles.");
        return false; // Does't submit the form (for IE)
    }
}

此外，在调用该函数时，只需直接调用该函数。

<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="validateForm();">

Answer 3

将required属性添加到<select>

需要空白的警报用户字段

3 个答案: