使用 jQuery 以动态 PHP 形式设置属性 - 不工作 [英] Setting attributes with jQuery in dynamic PHP form - Not Working
问题描述
我一直在使用 jQuery 设置属性任务很简单,我将 data-error 属性设置为字段所需的属性工作得很好,但是 data-error 属性不起作用并且没有显示错误在哪里什么都没有选择.尝试了很多方法,还是不行.
I am stuck in setting up the attribute using jQuery The task is quite simple, I am setting the data-error attribute to field the required attribute is working perfectly fine, but data-error attribute is not working and not showing error where nothing is selected. tried many ways, but it is not working.
我想显示一个错误,它选择是而不选择优先级下拉列表.如果它选择否,那么它不会显示任何错误并让它提交
I want to show an error where it selects Yes and does not select priority dropdown. If it selects no then it show no error and let it submit anyway
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
if ($(this).is(":checked") && $(this).val() == "Y") {
$(this).closest("tr").find(".ShowPriority").show(); //show
$(this).closest("tr").find(".Priority").attr('required', '');
$(this).closest("tr").find(".Priority").attr('data-error', 'This field is required.');
} else {
$(this).closest("tr").find('.ShowPriority').hide(); //hide
$(this).closest("tr").find(".Priority").removeAttr('required', '');
$(this).closest("tr").find(".Priority").removeAttr('data-error', 'This field is required.');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>
推荐答案
你需要在 select 上有 required .然后你可以在需要时删除它
You need to have required on the select. Then you can remove it when you want
$(function() {
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
const show = $(this).is(":checked") && $(this).val() == "Y";
$(this).closest("tr").find(".ShowPriority").toggle(show); //show
$(this).closest("tr").find(".Priority").attr('required', function() { return show });
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<form>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>
<input type="submit">
</form>
这篇关于使用 jQuery 以动态 PHP 形式设置属性 - 不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!