Question

我有一个表单，其中包含2个要验证的字段，单选按钮和Textarea。

验证规则是

必须至少检查一台收音机
textarea不应为空。

以下是我的代码的DEMO。

问题在于＆＃34; Radio＆＃34;按钮是有条件的，它们可能在某些情况下隐藏。

因此。目前，如果单选按钮被隐藏，我将无法提交<form>。

我应该如下所示进行两次表单验证吗？或者是否有更好更短的方式进行此验证？

if (Radio is : visible){ 
  Here goes the validation for both form fields
} else{
  Do the Validation again only for Textarea
}

以下是我的代码：

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: {
            "Submit": 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();
    });

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

尝试以下内容，这应该会给你一个想法。

"Submit": function () {
   var enteredReason = $('#sessionReasonBox').val();
   var radioVisible = $("#sessionReason input:radio[name='sessionDocuments']:visible");
   var radioChecked = $("#sessionReason input:radio[name='sessionDocuments']:checked");
   var validationError = false;
   if(enteredReason.length <= 0) {
     validationError = true; // validation failure
     addReasonBoxError(); //add validation error for textarea
   }
   else
     removeReasonBoxError(); //remove validation error for textarea
   if(radioVisible.length){
     if (radioChecked.length == 0) {
        validationError = true; // validation failure
        addRadioError(); //add validation error for radio
     }
      else 
         removeRadioError(); //remove validation error for radio
   }
   if(validationError)
      showValidationError(); //add validation error
   else
      hideValidationError() //remove validation error
 }

Answer 2

是的，您可以查看css-property。

if (!($('button').css('display') === "hidden"))

如果给出单个参数，则css函数只返回值而不是设置它。此外，您当然必须优化选择器以选择正确的按钮。

了解详情：http://api.jquery.com/css/

根据单选按钮的可见性执行验证

2 个答案: