Question

我在“jQuery对话框”中有一个表单，其中有一个<textarea>，另一个是<input type="radio" />个按钮

两者都是必填字段，如果用户将测试区留空或者没有检查任何无线电，则用户应该收到消息并且对话框不应该关闭。

我尝试过验证，它适用于Textarea但不适用于单选按钮。

以下是我创建的小提琴： http://jsfiddle.net/JLDf5/

以下是相同的代码：

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>

的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");
        }
    }
});

请建议！

Answer 1

IF块需要ELSE IF，并且关闭应该在IF块内。并检查！（不）收音机检查。并且不需要返回虚假。

 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");
 }

以下是fiddle

Answer 2

我使用以下代码解决了问题：

<强> WORKING DEMO

以下是相同的代码

<强> HTML

<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

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();
});

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

2 个答案: