jQuery选择提交后出现的元素

Question

我有一个问题困扰了我一段时间。这是一种返回不一致错误消息的表单。默认情况下，表单上的复选框不是强制性的，因此我强制它们使用以下代码：

$(function() {
 var q = $("input[name='field_1']");     
  if (!$(q).is(':checked')) {                
   $(q).prop('required', true);     
 }           
});

接下来的问题是，有一个隐藏类.error 获取字段的名称（例如名字），然后在此附加“是必需的”，从而导致用户友好的错误消息。此类仅在提交表单时出现在 DOM 上，似乎不喜欢复选框 - 我相信这是因为它没有任何东西可以放在“必需”前面。

这是它的外观快照。

<div class="comp_class" >
<label class='label_1 '>Competition</label>
<div class="control_1">
    <div class="checkbox"><label><input type='checkbox' name='field_1' value='Yes' required class ="error"/> Yes</label>
    <label for="field_1" class="error"> is required.</label>
    "Yes"

对于更简单的字段（例如名字），错误类从包含在label_1 中的 HTML 中获取字段名称，这被拉到“必需”前面。其他字段在默认情况下是强制性的，其中令人沮丧的部分是我无法访问 HTML，否则这将非常简单，所以我为什么要尝试使用 jQuery 来访问和操作内容。

我尝试了类似的东西（在许多其他事情中！） -

$('#submit_button').click(function(){
 $('.error').html("<p>This field is required</p>")
});

如果有人有任何建议，请发送给我。

Answer 1

我创建了一些示例代码来测试您的测试用例中的复选框：

$(document).ready(function() {
  $('#submit_button').click(function() {
    checkBox();
  });

  function checkBox() {
    var $q = $("input[name='field_1']");
    if (!$q.is(':checked')) {
      $('.error').html("<p>This field is required</p>")
      $q.prop('checked', true);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comp_class">
  <label class='label_1 '>Competition</label>
  <div class="control_1">
    <div class="checkbox">
      <label>
        <input type='checkbox' name='field_1' value='Yes' required />Do you agree?</label>
      <label for="field_1" class="error"></label>
    </div>
  </div>
  <button id='submit_button'>Submit</button>
</div>