0

私はこのフォームを持っています:

<form>
<fieldset>
<legend>Address Information</legend>

<div>
<label for="country">Country:</label> <span id="country-list">
<select name="country" class="required">
<option value="0">Please Select</option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">American Samoa</option>
</select>&nbsp;</span>
<span class="error_msg" style="display: none; ">
<br><label for="space">&nbsp;</label>Please select your country.</span>
</div>

<div>
<label for="street-address">Street Address:</label> <input type="text" id="street_address" name="street_address" value="" size="50" class="required">
<span class="error_msg" style="display: inline; "><br><label for="space">&nbsp;</label>Please enter your accurate street address (at least 7 characters)</span>
</div>

<div>
<label for="suburb">Suburb:</label> <input type="text" name="suburb" value="" class="required">
</div>

<div>
<label for="city">City:</label> <input type="text" id="city" name="city" value="" class="required">
<span class="error_msg" style="display: inline; "><br><label for="space">&nbsp;</label>Please enter your city (at least 4 characters)</span>
</div>

<div>
<label for="post-code">Post Code:</label> <input type="text" id="postcode" name="postcode" value="" class="required">
<span class="error_msg" style="display: inline; "><br><label for="space">&nbsp;</label>Please enter your postal code (at least 3 characters)</span>
</div>

</fieldset>
</form>

下にjquery関数があり、送信をクリックすると、選択フィールドのみinput text fieldsがチェックされ、選択フィールドはチェックされません。フィールドに値がある場合は true を返し、値のないフィールドがある場合は false を返します。

function ValidateForm()
{
   jQuery('span.error_msg').hide();
   var success = true;

     jQuery("#shippingF .required").each(function()
        {
            if(jQuery(this).val().length <= 2)
            {
                jQuery(this).next().show();
                success = false;
            }
     });

    return success;
}

この単純な検証関数に選択フィールドを含めるにはどうすればよいですか?

4

2 に答える 2

0

ループに別の評価を含めて、選択かどうかを確認できます。

function ValidateForm()
{

   jQuery('span.error_msg').hide();
   var success = true;

   jQuery("#shippingF .required").each(function()
   {

       if(jQuery(this).hasClass('select')) {
          if(jQuery(this).val() == 0) {
             success = false;
          }
       } else {
          if(jQuery(this).val().length <= 2) {
             jQuery(this).next().show();
             success = false;
          }
       }
   });
   return success;
}

それらの線に沿った何か。

于 2012-09-18T03:33:00.357 に答える
0

OK、申し訳ありませんが、元のコードのいくつかのエラーによって脱落しました。これが最終的な作業バージョンです

function ValidateForm()
{
 jQuery('span.error_msg').hide();
 var success = true;

 if($('select[name=country]').val() == '0'){
   success = false;
  }
     jQuery(".required").each(function()
      {
        if(jQuery(this).val().length <= 2)
        {alert(jQuery(this).val().length);
            jQuery(this).next().show();
            success = false;
        }
 });

return success;
}

元のコードに関するいくつかの注意事項:

  1. セレクター Id が見つからなかったshippingFので、それを削除してクラスごとに参照する.required必要がありました。階層のどこかでそれを定義すれば問題ありません。

  2. .required各ループに含まれないように、選択要素からクラスを削除しました。これは常に 1 を返し、if ステートメントif(jQuery(this).val().length <= 2) が失敗する原因となります。

これが実用的なフィドルです

于 2012-09-18T03:25:46.487 に答える