3

jquery検証プラグインを使用して、一意で必須の選択ボックスをチェックしました。

ただし、一意のチェックはまったく機能せず、必要なチェックは最初の選択ボックスでのみ機能します。

これを修正する方法は？ありがとうございました

jquery

        $("#insertResult").validate({
    rules: {
         'select[]': {
              required: true,
              unique: true
          }
       },
   });

html

<form id="insertResult" method="post" action="excelSQL.php" >
       <select id="selectField0" name="select[]" style="float:left">
                       <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
    </select>


    <select id="selectField1" name="select[]" style="float:left">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
    </select>
</form>

更新：以前に行ったjsファイルを編集し、selectField0またはselectField_0を試しましたが、まだ運がありません

    checkForm: function() {
        this.prepareForm();
        for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
            if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
                for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                    this.check( this.findByName( elements[i].name )[cnt] );
                }
                } else {
            this.check( elements[i] );
        }
        }
    return this.valid();

}、

4

1 に答える 1

4

これは、jQueryバリデーターの一般的な問題です。この問題を回避するには、次の2つの方法があります。

方法1：

次の手順に従って両方を処理するようにjQueryValidatorプラグインを変更します。http：//www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements //

方法2：

バリデーターを各選択に個別に適用します。

HTML：

<form id="insertResult" method="post" action="excelSQL.php" >
    <select id="selectField0" name="select[]" style="float:left" class="error">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>

    <select id="selectField1" name="select[]" style="float:left">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>
    ...
</form>

JavaScript：

 $("#insertResult").find("select").each(function() {
     $(this).validate({
         rules: {
             'select[]': {
                 required: true,
                 unique: true
              }
         }
     });
 });

方法3：

jQueryプラグインは、より基本的なタスクには非常に価値がありますが、場合によっては、実際に実行しようとしていることは、プラグインが実行するように設計された範囲外である可能性があります。「ライブラリコードを変更する」のような解決策を聞くと、おそらくそのライブラリは私には向いていないのではないかと思います。これは、変更の複雑さと、プラグインを最新バージョンに更新したときに同僚や後継者が機能しなくなった理由を理解するのに苦労する可能性に依存します。

したがって、メソッド＃3はjQueryバリデーターを完全に回避し、基本的な検証を容易にするためにjQueryのみを使用します。

JavaScript：

    // submit handler for form
    $('#insertResult').submit(function(event) { 

        // if either field is not selected, show error and don't submit
        if( itemNotSelected( $('#selectField0'), $('#selectField1') ) == true )  { 

            $('.error2').css("display","block");
            event.preventDefault(); 
            return false;

        } else if( isEqual($("#selectField0"), $("#selectField1") ) == true ) {

            $('.error2').css("display","none");
            $('.error1').css("display","block");alert("afda")
            event.preventDefault(); 
            return false;

        } 
    });

    // hide error text on focus of element
    $('#selectField0, #selectField1').focus(function() {
        $('.error2, .error1').hide();

    });

// helper methods to check if both fields are equal
function isEqual(elem1, elem2) {
    return (elem1.find("option:selected").html() == 
            elem2.find("option:selected").html());
}

// helper methods to check if one field (or both) is not selected
function itemNotSelected(elem1, elem2) {
    return ( elem1.find("option:selected").html() == "Select one" || 
             elem2.find("option:selected").html() == "Select one" );
}

HTML：

<select id="selectField0" name="select[]" style="float:left" class="error">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>

<select id="selectField1" name="select[]" style="float:left">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>
<span class="error2" style="display:none">These are required fields</span>
<span class="error1" style="display:none">Fields must be unique</span>

<input type="submit" name="submit" value="submit" />

上記のコードは、次の条件が当てはまる場合にのみフォームを送信します。

  • 両方の選択ボックスでアイテムが選択されています。これは「必須」の条件を満たす。

  • 選択は同じではなく、「一意の」条件を満たす。

  • ユーザーが選択ボックスにフォーカスすると、エラーは消えます。

  • 上記の送信条件が当てはまらない状態でユーザーが送信しようとすると、次のエラーが表示されます。

  • 1つ以上の選択ボックスが選択されていない場合、「これらは必須フィールドです」というメッセージが表示されます。

  • 両方が等しく選択されている場合、「フィールドは一意である必要があります」というメッセージが表示されます。
于 2012-05-07T03:41:18.380 に答える