Javascript 文本框和单选按钮的jQuery验证

我在“jQuery对话框”中有一个表单，其中有一个

，另一个是一对

按钮

这两个字段都是必填字段，如果用户将测试区域留空或未检查任何收音机，则用户应收到消息，且对话框不应关闭

我试过做验证，它对Textarea有效，但对单选按钮无效

这是我创作的小提琴：

以下是相同的代码：

HTML

<div id="sessionReason" title="End Transaction">
    <p class="validation-summary-errors marginBottom10">Provide the following information to proceed:</p>
    <div class="marginBottom" id="sessionDocumentMessage">
        <label class="marginBottom5 marginTop10">Return the document?</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Return</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Keep</label>
        <br>
    </div>
    <p class="marginBottom5" id="sessionReasonMessage">Reason for ending the transaction:</p>
    <textarea id="sessionReasonBox" class="reasonBox"></textarea>
</div>

<input class="redButton" id="openDialogButton" type="button" value="Open Dialog">
<div id="sessionReason" title="End Transaction">
    <p class="validation-summary-errors marginBottom10">Provide the following information to proceed:</p>
    <div class="marginBottom" id="sessionDocumentMessage">
        <label class="marginBottom5 marginTop10">Return the document?</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Return</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Keep</label>
        <br>
    </div>
    <p class="marginBottom5" id="sessionReasonMessage">Reason for ending the transaction:</p>
    <textarea id="sessionReasonBox" class="reasonBox"></textarea>
</div>

---

请建议

IF块需要ELSE-IF，并且关闭应该在IF块内。检查一下！（未）无线电检查。并且不需要返回false

 if (!$('[name="sessionDocuments"]').is(':checked')){
    $('#sessionReason .validation-summary-errors').show();
    $("#sessionDocumentMessage label").addClass("redtext");
 }
 else if (sessionReasonBox == "") {
    $('#sessionReason .validation-summary-errors').show();
    $("#sessionReasonMessage").addClass("redtext");
    //return false;
 }
 else {
    $('#sessionReason .validation-summary-errors').hide();
    $("#sessionReasonMessage").removeClass("redtext");
    $(this).dialog("close");
 }

---

以下是我用以下代码修复的问题：

下面是相同的代码

---

HTML

<div id="sessionReason" title="End Transaction">
    <p class="validation-summary-errors marginBottom10">Provide the following information to proceed:</p>
    <div class="marginBottom" id="sessionDocumentMessage">
        <label class="marginBottom5 marginTop10">Return the document?</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Return</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Keep</label>
        <br>
    </div>
    <p class="marginBottom5" id="sessionReasonMessage">Reason for ending the transaction:</p>
    <textarea id="sessionReasonBox" class="reasonBox"></textarea>
</div>

<input class="redButton" id="openDialogButton" type="button" value="Open Dialog">
<div id="sessionReason" title="End Transaction">
    <p class="validation-summary-errors marginBottom10">Provide the following information to proceed:</p>
    <div class="marginBottom" id="sessionDocumentMessage">
        <label class="marginBottom5 marginTop10">Return the document?</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Return</label>
        <br>
        <label>
            <input type="radio" name="sessionDocuments" />Keep</label>
        <br>
    </div>
    <p class="marginBottom5" id="sessionReasonMessage">Reason for ending the transaction:</p>
    <textarea id="sessionReasonBox" class="reasonBox"></textarea>
</div>

提供以下信息以继续：
归还文件？


返回


保持


结束交易的原因：

jQuery

$('#sessionReason .validation-summary-errors').hide();
$("#sessionReason").dialog({
    buttons: {
        "End Transaction": function () {
            var sessionReasonBox = $("#sessionReasonBox").val();
            if ($('[name="sessionDocuments"]').is(':checked')){
                $('#sessionReason .validation-summary-errors').show();
                $("#sessionDocumentMessage label").addClass("redtext");
            }
            if (sessionReasonBox == "") {
                $('#sessionReason .validation-summary-errors').show();
                $("#sessionReasonMessage").addClass("redtext");
                return false;
            }
            else {
                $('#sessionReason .validation-summary-errors').hide();
                $("#sessionReasonMessage").removeClass("redtext");
            }
            $(this).dialog("close");
        },
            "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

function showValidationError() {
    $('#sessionReason .validation-summary-errors').show();
}

function hideValidationError() {
    $('#sessionReason .validation-summary-errors').hide();
}

function addRadioError() {
    $("#sessionDocumentMessage label").addClass("redtext");
}

function removeRadioError() {
    $("#sessionDocumentMessage label").removeClass("redtext");
}

function addReasonBoxError() {
    $("#sessionReasonMessage").addClass("redtext");

}

function removeReasonBoxError() {
    $("#sessionReasonMessage").removeClass("redtext");
}

$('#sessionReason .validation-summary-errors').hide();
$("#sessionReason").dialog({
    autoOpen: false,
    buttons: {
        "End Transaction": function () {
            var enteredReason = $('#sessionReasonBox').val();
            var radioChecked = $("#sessionReason input:radio[name='sessionDocuments']:checked");

            if ((enteredReason.length <= 0) && (radioChecked.length == 0)) {
                //Show Error
                showValidationError();
                addReasonBoxError();
                addRadioError();
                //Hide Validation Error
            } else if ((enteredReason.length > 0) && (radioChecked.length == 0)) {
                //Show Validation Error
                showValidationError();
                addRadioError();
                //Hide Validation Error
                removeReasonBoxError();
            } else if ((enteredReason.length <= 0) && (radioChecked.length > 0)) {
                //Show Validation Error
                showValidationError();
                addReasonBoxError();
                //Hide Validation Error
                removeRadioError();
            } else {
                $(this).dialog("close");
                //Hide Validation Error
                hideValidationError();
                removeRadioError();
                removeReasonBoxError();
            }
        },
            "Cancel": function () {
            $(this).dialog("close");
        }
    }
});



$("#openDialogButton").click(function () {
    $('#sessionReasonBox').val("");
    $('#sessionDocumentMessage input:radio').removeAttr('checked');
    $("#sessionReason").dialog("open");
    //Hide Validation Error
    hideValidationError();
    removeRadioError();
    removeReasonBoxError();
});

函数showValidationError（）{
$（'#sessionReason.validation摘要错误'）.show（）；
}
函数hideValidationError（）{
$（'#sessionReason.validation摘要错误'）.hide（）；
}
函数addRadioError（）{
$（“#sessionDocumentMessage标签”）.addClass（“redtext”）；
}
函数删除器adioerror（）{
$（“#sessionDocumentMessage标签”）.removeClass（“redtext”）；
}
函数addReasonBoxError（）{
$（“#sessionReasonMessage”）.addClass（“redtext”）；
}
函数RemoveEasonBoxerror（）{
$（“#sessionReasonMessage”）.removeClass（“redtext”）；
}
$（'#sessionReason.validation摘要错误'）.hide（）；
$（“#会话原因”）。对话框({
自动打开：错误，
按钮：{
“结束事务”：函数（）{
var enteredReason=$（'#sessionReasonBox'）.val（）；
var radioChecked=$（“#会话原因输入：radio[name='sessionDocuments']：checked”）；
如果（（输入reason.length 0）和&（radioChecked.length==0））{
//显示验证错误
showValidationError（）；
addRadioError（）；
//隐藏验证错误
RemoveEasonBoxerror（）；
}否则如果（（输入Reason.length 0））{
//显示验证错误
showValidationError（）；
addReasonBoxError（）；
//隐藏验证错误
删除错误（）；
}否则{
$（此）.dialog（“关闭”）；
//隐藏验证错误
hideValidationError（）；
删除错误（）；
RemoveEasonBoxerror（）；
}
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“#openDialogButton”）。单击（函数（）{
$（“#sessionReasonBox”）.val（“”）；
$（“#sessionDocumentMessage输入：radio”）.removeAttr（'checked'）；
$（“#会话原因”）。对话框（“打开”）；
//隐藏验证错误
hideValidationError（）；
删除错误（）；
RemoveEasonBoxerror（）；
});