jQuery验证require_from_group错误消息位置

我已成功地使用 jsfiddle.net/y3qayufu/2/中的代码来验证一组字段，但是如何在特定位置显示错误消息。我希望错误消息在按下提交按钮后仅出现一次，最好在组之上，但可能在下面。jQuery验证require_from_group错误消息位置

取而代之的是：

我想这样的：

感谢

来源

2016-12-28 user3538252

检查我下面 –

你好这里是一个固定的小提琴http://jsfiddle.net/bayahiassem/sdx4ru4s/2/

如果你不能打开它，在这里更新后的代码：

HTML只有使用errorPlacement添加一个ID，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：

$(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.")); 

});

来源

2016-12-28 09:29:14

试试这个上提交ü可以把函数定义

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"); 
}

提供

来源

2016-12-28 09:12:09

小提琴你的代码工作的答案，但他正在使用JQuery验证器 –

使用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>

来源

2016-12-28 09:14:48

这将多次显示错误消息 –

jQuery验证require_from_group错误消息位置

回答

相关问题