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

jQuery validation for textbox and Radio buttons

本文关键字：jQuery 验证 单选按钮 文本      更新时间：2023-09-26

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

都是必填字段，如果用户将testarea设置为空或者不选中任何单选项，则用户应该得到消息并且对话框不应该关闭。

我试过做验证，它的工作为文本区域，但不为单选按钮。

这是我创建的提琴:http://jsfiddle.net/JLDf5/

下面是相同的代码:

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

请建议!

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

小提琴来了

我用下面的代码修复了这个问题:

演示工作

下面是相同

的代码

<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();
});
相关文章：