jQuery 验证需要基于另一个字段的输入和目标字段的输入

Question

如果另一个字段未填写或目标字段已填写，我如何使输入字段成为必填项？

我有两个字段用于高度...英寸和英尺。我想根据彼此制作所需的字段。我能够获得使用功能的要求

"user[height][inches]":{
    required: function(element) {
       return (!$("input[name='user[height][feet]']").hasClass('valid'));
    },

我对脚做了同样的事情，效果很好。我需要的下一步是范围验证，但前提是该字段是必需的，或者不是必需的但无论如何都要填写。我能够让它与 Depends 一起使用

range: {
   param: [1, 120],
   depends: function(element) {
   // if feet is not filled out then require inches range
   if (!$("input[name='user[height][feet]']").hasClass('valid')){
      return true;
   // else if feet is filled out and inches is not blank or 0 then require range
   } else if ( $("input[name='user[height][inches]']").val() != "" && $("input[name='user[height][inches]']").val() != "0" ) {
      return true;
   // else feet is filled out and inches is blank or 0 so do not require range
   }  else {
      return false;
   }

不过，我似乎无法满足 Number 要求。它仅适用于第一次验证，但当用户再次尝试使用非数字时，它会接受它。

        number: function(element){
            // if feet is not filled out then require number input
            if (!$("input[name='user[height][feet]']").hasClass('valid')){
              return true;
              // else if feet is filled out and inches is not blank
            } else if ( $("input[name='user[height][inches]']").val() != "" ) {
              return true;
              // else feet is filled out and inches is blank so do not require
            }  else {
              return false;
            }
        }

我也试过了……

        number: {
            depends: function(event){
               // if feet is not filled out then require number input
               if (!$("input[name='user[height][feet]']").hasClass('valid')){
                 return true;
              // else if feet is filled out and inches is not blank
               } else if ( $("input[name='user[height][inches]']").val() != "" ) {
                 return true;
              // else feet is filled out and inches is blank so do not require
               }  else {
                 return false;
               }
             }
           }

我的字段形式是

<input type="number" name="user[height][inches]" placeholder="11"/> 
<input type="number" name="user[height][feet]" placeholder="4"/> 

我注意到，如果我在验证期间进行调试，当我调用 $("input[name='user[height][inches]']").val() 时，即使输入值也会返回 ""是“字符串”，我相信这是因为它没有通过验证，但我也认为它破坏了我的逻辑。

另一个问题可能是，最初它正在检查 feet 字段是否有“有效”并且它返回 false，但看起来在最初为 false 之后，一旦英寸字段被填写，它就会被设置为验证，然后在第二次尝试时破坏了验证逻辑。

这是我的 JFiddle，但我在复制时遇到了麻烦，因为它正确地验证了一个数字，甚至没有包括验证要求...http://jsfiddle.net/sza51q6s/1/

我可能不得不完全重新评估我的逻辑。仅当未填写其他字段或已填写当前字段时，如何才能使目标字段成为必填项？

Answer 1

工作示例

http://codepen.io/anon/pen/MYaLXv

<form>
  <input type="checkbox" id="check"/>
  <label for="check">Make text input required</label><br/>
  <input id="input" type="text"/>
  <button type="submit">Try to Submit </button>
</form>

jQuery

$("#check").on('change' function() {
  if ( this.checked ) {
    $("#input").attr('required', true);
  } else {  
    $("#input").attr('required', false);
  }
});

Answer 2

我以前见过这个问题是某些浏览器在输入非数字时如何处理type="number" 字段（value 最终为空白，因此插件确实看到了该条目并且该字段被视为空） .试试type="text"，看看有没有什么不同。

否则，请确保您拥有最新版本的 jQuery Validate (1.13)，因为最近修复了与 type="number" 问题相关的错误。

Answer 3

Jquery 一个字段验证依赖于另一个字段输入

   'document': {
                required: function(element){
                    return $("#document_title").val()!="";
                }
            }