在选择中选择选项后如何删除"This field is required."？

Question

我正在创建一个表单，我进行了验证，因此当您单击提交按钮时，它会弹出一个field is required文本。

它工作得很好，但是，它有 1 个问题。当它弹出时，我从选择标签中选择一个选项，field is required文本不会自动隐藏，但是当它是输入文本并且我在其中键入内容时，文本会自动隐藏。

$('#name').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});
function Validate(_id) {
$("#form_validation").validate({
rules: rules,
highlight: function(input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function(input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function(error, element) {
$(element).parents('.form-group').append(error);
}
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<div class="form-line">
<select class="form-control show-tick" name="name" id="name" required>
<option value="" disabled selected hidden="">-- Please select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="form-group form-float" align="center">
<input type="submit" name="insert" class="btn btn-lg large" id="data">
</div>

Answer 1

您是否尝试过将属性 novalidate 放在 SELECT 标签上？

例：

<select class="form-control show-tick" name="name" id="name" required novalidate>

Answer 2

确保在此代码段中键入正确的selector：

$('#elemschool').on('change', function() {
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});

将elemschool更改为name作为选择中的id<select class="form-control show-tick" name="name" id="name" required>等于name

所以基本上它会像下面这样：

$('#name').on('change', function() { // here is the change
if (this.value != "") {
this.removeAttribute("required");
this.required = false;
}
});