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

0

form送信されないようにするために追加したい1行

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

注: を使用するには、ダウンロードして Web フォームに追加する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 に答える