jQueryはrequire_from_groupエラーメッセージの場所を確認します

Question

jsfiddle.net/y3qayufu/2/のコードを使用して一連のフィールドを検証できましたが、エラーメッセージを特定の場所に表示するにはどうすればよいですか。エラーメッセージは、送信ボタンが押された後に1回だけ表示されることをお勧めします。これに代えて

：

が

私はこれをしたいと思います：

Answer 1

こんにちは、ここでは、固定されたフィドルhttp://jsfiddle.net/bayahiassem/sdx4ru4s/2/

ですそれをここに開く更新されたコード：

HTMLのみerrorPlacementを使用して、H3

<form id="findproject_form" method="post" action="{$BASE_URL}findproject"> 
    <div class="bgtrans"> 
     <h3 id="header">Search By</h3> 

     <div class="div_bg1"> 
      <div class="searchbg"> 
       <div class="seachbginputbg"> 
        <input class="seachbginput validategroup" type="text" placeholder="Profession" id="Profession" name="Profession" value="" /> 
       </div> 
      </div> 
      <div class="searchbg"> 
       <div class="seachbginputbg"> 
        <input class="seachbginput validategroup" type="text" placeholder="Location" id="Location1" name="Location1" value="" /> 
       </div> 
      </div> 
      <div class="searchbg" style="margin-right:0px;"> 
       <div class="seachbginputbg"> 
        <input class="seachbginput validategroup" type="text" placeholder="Company" id="Company" name="Company" value="" /> 
       </div> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="div_bg2"> 
      <div class="searchbg"> 
       <div class="seachbginputbg"> 
        <input class="seachbginput validategroup" type="text" placeholder="Name" id="Name" name="Name" value="" /> 
       </div> 
      </div> 
      <div class="searchbg"> 
       <div class="seachbginputbg"> 
        <input class="seachbginput validategroup" type="text" placeholder="Key Words" id="KeyWord" name="KeyWord" value="" /> 
       </div> 
      </div> 
      <div class="searchbg" style="margin-right:0px;"> 
       <input class="bgbttn" type="submit" name="submit" value="" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</form> 

JSにIDを追加しました：

$(document).ready(function() { 

    jQuery.validator.setDefaults({ 
     debug: true, 
     success: "valid" 
    }); 

    $("#findproject_form").validate({ 
     rules: { 
      Profession: { 
       require_from_group: [1, ".validategroup"] 
      }, 
      Location1: { 
       require_from_group: [1, ".validategroup"] 
      }, 
      Company: { 
       require_from_group: [1, ".validategroup"] 
      }, 
      Name: { 
       require_from_group: [1, ".validategroup"] 
      }, 
      KeyWord: { 
       require_from_group: [1, ".validategroup"] 
      } 
     }, 
     errorPlacement: function(error, element) { 
     console.log(error[0].innerText); 
      if(error[0].innerText == 'Please fill at least 1 of these fields.' && !errorshowed) { 
      error.insertAfter("#header"); 
      errorshowed = true; 
      } 
     } 
    }); 

    var errorshowed = false; 

    $.validator.addMethod("require_from_group", function (value, element, options) { 
     var $fields = $(options[1], element.form), 
      $fieldsFirst = $fields.eq(0), 
      validator = $fieldsFirst.data("valid_req_grp") ? $fieldsFirst.data("valid_req_grp") : $.extend({}, this), 
      isValid = $fields.filter(function() { 
       return validator.elementValue(this); 
      }).length >= options[0]; 

     // Store the cloned validator for future validation 
     $fieldsFirst.data("valid_req_grp", validator); 

     // If element isn't being validated, run each require_from_group field's validation rules 
     if (!$(element).data("being_validated")) { 
      $fields.data("being_validated", true); 
      $fields.each(function() { 
       validator.element(this); 
      }); 
      $fields.data("being_validated", false); 
     } 
     return isValid; 
    }, $.validator.format("Please fill at least {0} of these fields.")); 

}); 

Answer 2

これは上のuは関数定義を入れることができ提出してください

おかげ

var valid=0; 
$(this).find('input[type=text], select').each(function(){ 
if($(this).val() != "") valid+=1; 
}); 
if(valid==0) 
{ 
$('#myDiv').html("please fil atleast one of these"); 
} 

Answer 3

使用jQueryの検証errorPlacement機能提供：

JsFiddle updated

$("#findproject_form").validate({ 
    rules: { 
     .... 
    }, 
    errorPlacement: function(error, element) { 
     $('label.error').remove(); 
     error.insertAfter("#submit_btn"); 
    } 
}); 

HTML：あなたができない場合

 <div class="searchbg" id="submit_btn" style="margin-right:0px;"> 
      <input class="bgbttn" type="submit" name="submit" value="" /> 
    </div>