Question

以下是我为验证表单而创建的代码。

$(function () {
    $('#subbtn').click(function () {
        if ($('#course').val('x')) {
            $('#s1').show();
        }
        if ($('#sem').val('x')) {
            $('#s2').show();
        }
    });

HTML

<button id="subbtn" type="submit>Submit</button
<span id="$s1" style="display:none;">*</span>
<span id="$s2" style="display:none;">*</span>

#course和#sem是列表框的ID 在保留空白和按下按钮后它正常工作（两个星都会显示），但是在选择第一个列表框并将第二个列为空之后，然后按下按钮然后它会给出相同的结果（也就是说，显示两个星形而不是一）请帮忙，提前谢谢

Answer 1

条件不正确，应该是

if ($('#course').val() == 'x') {...}

而不是

if($('#course').val('x')) {...}

第二个列表#sem相同。

Answer 2

请试试这个

$(function () {
    $(document).on('click', '#subbtn', function () {
        if ($('#course').val() == '') {
            $('#s1').show();
        } else {
            $('#s1').hide();
		}
        if ($('#sem').val() == '') {
            $('#s2').show();
        } else {
            $('#s2').hide();
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="course">
	<option value=""></option>
	<option value="be">B.E</option>
	<option value="mba">MBA</option>
	<option value="arts">Arts</option>
	<option value="finance">Finance</option>
</select>
<select id="sem">
	<option value=""></option>
	<option value="1">1St</option>
	<option value="2">2nd</option>
	<option value="3">3rd</option>
	<option value="4">4th</option>
</select>
<button id="subbtn" type="submit">Submit</button>
<span id="s1" style="display:none;">*</span>
<span id="s2" style="display:none;">*</span>

如何使用jQuery创建自定义表单验证？

2 个答案: