1

我想select在表单中的标签上设置验证，以便用户在不选择位置的情况下无法继续。

下面是表格...

<form name="form1">
    Pickup Suburb: 
    <select id="pick" class="pick" name="pick"/><br />
        <option value="none">-- Please select a location --</option>
        <option value = 1>City </option>
        <option value = 2>Airport </option>
        <option value = 3>Abbotsbury </option>
        <option value = 4>Abbotsford </option>
        <option value = 5>Acacia Gardens </option>
        <option value = 6>Agnes Banks </option>
        <option value = 7>Airds </option>
        <option value = 8>Akuna Bay </option>
    </select>

    <br />Rear facing baby seat 
    <select class="rfbs" name="rfbs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br />

    <br />Booster seat 
    <select class="bs" name="bs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <br />    
    <br />Luggage Trailer 
    <select class="lt" name="lt" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>

    <br />
    <br /><input class="show-popup" type="submit" value="Get Quote">
</form>

我已经应用了一个JavaScript弹出窗口来显示用户填写表单时的结果，因此如果用户尝试在未选择位置的情况下提交表单，是否可以应用显示错误消息的验证。

任何帮助将不胜感激。

4

3 回答 3

4

因为选择字段总是被选择的值（默认的第一个选项），你可以检查：

if($('#pick').val()=='none') {    
  alert('choose some value');
  return false;
}
于 2013-09-30T11:10:27.023 回答
0

表单元素允许在用户尝试提交表单时调用 onSubmit 标记。

你可以尝试这样的事情：

<form onsubmit="checkFormValidity()">
<select id="location" ... >

然后在您的javascript中，您可以执行以下操作：

function checkFormValidity(){

  var select = document.getElementById("location");
  if(select.options.selectIndex == 0)
  { 
    return false; 
  }
  return true;

}
于 2013-09-30T11:10:40.793 回答
0

我想添加一行以确保form不会提交

if($('#pick').val()=='none'){
    alert('choose some value');
    return false;  // this is a missing line
}

注意：要使用jQuery，您需要下载它并将其添加到您的网络表单中

编辑：

<form id="form1" name="form1" method="post">
Pickup Suburb: 
    ....
</select>
<br /><input class="show-popup" type="submit" value="Get Quote">
</form>

JavaScript

$( "#form1").submit(function( event ) {
    if($('#pick').val()=='none'){
        event.preventDefault(); //will prevent default form submission
        alert("Please select one of the options provided");
        return false;
    }
});

您可以在 jsfiddle 上查看演示

于 2013-09-30T11:13:31.473 回答