Question

尝试确保使用jQuery填写所有“必填”字段（以启用页面加载时禁用的提交按钮）。必填字段是通过 ON the LABEL 上的Required css类标识的。

我需要做的是能够在必填字段中输入1）某项内容或2）用户离开该字段时检查长度（已输入值）。

我正在使用的示例（不受我控制）

<label for='txtField1' class='Required'>Field 1</label>
<input type='text' id='txtField1'/>

我可以使用以下代码检查“必须填写”字段：

var reqEmpty=0;
jQuery('.Required').each(function(){
    var elem=jQuery(this).attr('for');
    if(jQuery('#'+elem).val().length===0){
        console.log('empty');
        reqEmpty++;
    }
});
console.log(reqEmpty); //count of emtpy required fields

不幸的是，我无法将类添加到输入字段中-此应用程序中的某些控件会添加/删除/重置css类，并且在应用于输入本身时会清除Required类。

我要寻找的是如何“观察”这些字段并运行上面列出的必需检查。我正在考虑.blur（）函数，但无法在.Require元素上使用.blur（），我需要在通过“ for”连接到.Required的元素上使用.blur（）。属性。

jQuery('.Required').attr('for').blur(function(){
/*
this doesn't work, but demonstrates what I'm trying to do.

*/
});

TIA

Answer 1

以下内容非常通用，应该可以帮助您入门。它可能不适用于某些类型的输入（也许您必须添加其他代码）。变量很冗长，因此很清楚每个步骤在做什么。

words

$(document).ready(() => {
  $(".js-submit").on('click', (e) => {
    var $this = $(e.currentTarget);
    var $form = $this.closest('form');
    $form.find("label:not([for='']).required").each((i,e) => {
      var $label = $(e);
      var idSelector = "#" + $label.prop("for");
      if (idSelector.length > 1) {
        var $input = $(idSelector);
        if ($input.val().length === 0) {
          $input.addClass('error');
        }
        else {
          $input.removeClass('error');
        }
      }
    });
  });
  
  $("input, textarea, select").on('blur', (e) => {
    var $this = $(e.currentTarget);
    if ($this.val().length === 0) {
      var id = $this.prop('id');
      var labelSelector = "label.required[for='" + id + "']";
      if ($(labelSelector).length === 1) {
        $this.addClass('error');
      }
    }
    else {
      $this.removeClass('error');
    }
  });
});

.error {
  outline: 1px solid red;
}
div {
  margin: 5px 0;
}

Answer 2

据我了解，您禁用了按钮，一切正常之后，启用“提交”按钮。为此，您需要在每次模糊检查时都检查“ .Required”输入（我还添加了键盘，您可以将其保留）

$("input").on("keyup blur", checkFields)
$(".submit").prop('disabled', true);


function checkFields() {
	// Check for current selected input 
    if($(this).val().length === 0){
    	$(this).addClass("error")
    } else {
    	$(this).removeClass("error")
    }
    
    var error;
    // On every blur or keyup check all input fields after the .Required label
    $(".Required").each(function() {
        let inputField = $(this).next();
        if (inputField.val().length === 0) {
            error = true;
        }
    })
    // On error submit button handler
    if (!error) {
        $(".submit").prop('disabled', false);
    } else {
    	$(".submit").prop('disabled', true);
    }
}

.error {
    border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for='txtField1' class='Required'>Field 1</label>
<input type='text' id='txtField1' />
<label for='txtField1' class='Required'>Field 2</label>
<input type='text' id='txtField2' />
<label for='txtField1' class='Required'>Field 3</label>
<input type='text' id='txtField3' />
<label for='txtField1' class='notrequired'>Not Required Field</label>
<input type='text' id='txtField4' />

<button class="submit">
    Submit
</button>

根据标签通过标签为属性选择字段

2 个答案: