0

この検証を機能させるのに問題があります。選択ボックスが選択されており、フォーム内のデフォルトオプションが残っていないことを確認しています。

形：

<label for="reason">How can we help?</label>
   <select name="reas">
    <option value="Please Select">Please Select</option>
    <option value="Web Design">Web Design</option>
        <option value="branding">Branding</option>
        <option value="rwd">Responsive Web Design</option><span id="dropdown_error"></span>
  </select>

オンクリックイベント：

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return checkSelect();
    });
});

働き：

function checkSelect() {
    var chosen = "";
var len = document.conform.reas.length;
var i;

for (i = 0; i < len; i++){
        if (document.conform.reas[i].selected){
            chosen = document.conform.reas[i].value;
        }
 }

    if (chosen == "Please Select") {
    document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
    document.getElementById("dropdown_error").innerHTML = "";
    return true;
    }
}

コンソールでも次のエラーが発生します。

Uncaught TypeError: Cannot set property 'innerHTML' of null

私はJavaScriptを初めて使用するので、現時点でいくつかの簡単な例を学習して試していますが、これが検証されない原因がわかりません。

助けていただければ幸いです

4

3 に答える 3

2

まず、エラースパンを内に置くことはできません<select>。HTMLの外に移動すると<select>、JSエラーがなくなります。

<label for="reason">How can we help?</label>
<select name="reas">
    <option value="select">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option>
</select>
<span id="dropdown_error"></span>

次に、すでにjQueryを使用しているため、検証関数全体を次のように短縮できます。

function checkSelect() {
    var chosen = $('select[name="reas"]').val();
    if (chosen == "select") {
        $("dropdown_error").text("No Option Chosen");
        return false;
    } else {
        $("dropdown_error").text("");
        return true;
    }
}
于 2012-10-04T12:36:36.267 に答える
1

デフォルト値は「select」で、「PleaseSelect」をチェックしています。同じ値を使用してください。

これを変える

<option value="select">Please Select</option>

に

<option value="Please Select">Please Select</option>

編集：私は次のコードを使用します。javascriptの問題を修正するには、bodyタグを閉じる直前にスクリプトを配置してください。ドキュメントが解析される前にスクリプトが実行されています

<label for="reason">How can we help?</label>

<select id="reas" name="reas">
    <option value="">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option><span id="dropdown_error">    </span>  </option>


function checkSelect() {
    var chosen = document.getElementById["reas"].value;


    if (chosen == "") {
        document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
        document.getElementById("dropdown_error").innerHTML = "";
        return true;
    }
}
于 2012-10-04T12:33:07.960 に答える
1

デフォルトの選択をoptgroup：に変更します。

<optgroup>Please Select</optgroup>

その後、それは選択できなくなります

https://developer.mozilla.org/en-US/docs/HTML/Element/optgroup

于 2012-10-04T12:33:20.363 に答える