Валидиране на jQuery за текстово поле и радио бутони

Имам формуляр в „диалоговия прозорец на 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");
        }
    }
});

Моля, предложете!


person UID    schedule 19.06.2014    source източник


Отговори (2)


Блоковете 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");
 }

Ето го цигулката

person Nawed Khan    schedule 19.06.2014

Поправих проблема с кода по-долу:

РАБОТЕЩА ДЕМО

По-долу е кодът за същото


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();
});
person UID    schedule 23.06.2014