Question

我想在我的表单中设置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弹出窗口来显示用户填写表单时的结果，因此如果用户尝试提交表单而不选择位置，则可以应用显示错误消息的验证。

任何帮助都将受到高度赞赏。

Answer 1

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

if($('#pick').val()=='none') {    
  alert('choose some value');
  return false;
}

Answer 2

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

您可以尝试这样的事情：

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

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

function checkFormValidity(){

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

}

Answer 3

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

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

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

修改

<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上查看Demo

如何在我的网络表单中选择标签上设置验证？

3 个答案: