Jquery完整表单验证问题

Question

我正在处理一个使用 jquery 验证表单的 php 表单。现在在这个表单中有单选按钮列表。如果用户单击是，则与该单选按钮列表相关的文本框将不会被验证。如果用户单击否，则应验证与该单选按钮列表相关的文本框..

但现在的问题是，我之前的开发人员是这样验证表单的：

jQuery(".required").each(function(){
    var vlr = jQuery(this).val();
    if(vlr == ''){
        alert("Value not to be blank");
        jQuery(this).focus();
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

单选按钮列表的HTML部分

<tr>
      <td class="css-gen7 paragraph">Is premium paid? 
          <input name="is_premium_016" value="yes" class="required"  type="radio">Yes
          <input name="is_premium_016" value="no" class="required"  type="radio">No
      </td>
      <td class="css-gen7">if not,why not?  <input name="if_not_017" type="text" class="required" style="width:30%"></td>
    </tr>

此代码正在验证完整的表单我如何捕获单选按钮列表值以及如果用户勾选“是”如何停止文本框的验证？

我希望你明白我想要什么。

谢谢

Answer 1

试试这个：

$('#search_form').submit(function() {
    if($('#fepUserIDValue').attr("checked") == "checked" && $('#inquiry_date').val() == '') {
       alert('Required field missing');
       return false;
    }
});

参考链接：

jQuery Validation ONLY when certain radio buttons selected

How do I Required text box if radio button selected on form submission using jquery?

Answer 2

HTML

     <input type="radio" class="checker yes" name="check" > yes: <br>
     <input type="radio" class="checker no" name="check" > no: <br>

    <div>
       <input type="text" class="isValid" name="name">  
    </div>

JQUERY

      <script>

     //select the  radio buttons to be clicked 
    var radioBtns = jQuery('.checker');
     //text box to be affected but the radio buttons
     var textbox  = jQuery('.isValid');

     //when any of the  buttons  is clicked  a function to validate the textbox is run  
     radioBtns.on('click',function(){
        // get the button clicked 
         if (jQuery(this).hasClass('yes')){
             // put code to affect textbox when not valid
             alert('textbox not valid');
         }else if(jQuery(this).hasClass('no')){
             //put code to affect the textbox when it is valid 
             alert('text box is valid ');
         }

     });
 </script>

Answer 3

所以您只想在用户单击“否”时执行验证？那是对的吗？那么这里有一个可能对你有用的代码：假设上面的假设是正确的。

JAVASCRIPT

        <script type="text/javascript">
            ;                           // CLOSE OFF ANY UNCLOSED JS TAGS... IF ANY ;-)
            jQuery.noConflict();        // ADD THE noConflict() METHOD, IN CASE YOU ARE USING OTHER LIBRARIES THAT MAKE USE OF THE $ SYMBOL
            (function ($) {
                $(document).ready(function(e) {
                    // CREATE VARIABLES TO HOLD THE FORM, RADIO-BUTTON & TEXT-FIELD JQUERY OBJECTS
                    var isPremiumRadio      = $("input[name=is_premium_016]");
                    var ifNotWnyNot         = $("input[name=if_not_017]");
                    var controlForm         = $("form[name=name_of_your_form]");    //<== PLEASE; PUT THE REAL NAME OF YOUR FORM IN THE STEAD OF "name_of_your_form"

                    controlForm.on("submit", function(evt){
                        var theForm         = $(this);
                        var invalids        = [];
                        evt.preventDefault();
                        evt.stopPropagation();

                        $(".required").each(function(){
                            var vlr = jQuery(this).val();
                            if( $(this).is(isPremiumRadio) ){
                                if(isPremiumRadio.val() == "no"){
                                    //PERFORM YOUR VALIDATION HERE...
                                    if(ifNotWnyNot.val() == ""){
                                        invalids.push("Blank Field Error");
                                        alert("Could you, please, let us know why not?");
                                    }
                                }
                            }else if( $(this).is(ifNotWnyNot)  && ifNotWnyNot == ""){
                                if(isPremiumRadio.val() == "no"){
                                    invalids.push("Blank Field Error");
                                    alert("Could you, please, let us know why not?");
                                }
                            }else{
                                // VALIDATE OTHER FIELDS OTHERWISE...
                                if(vlr == ''){
                                    invalids.push("Blank Field Error");
                                }
                            }
                        });

                        if(invalids.length == 0){
                            theForm.submit();
                        }else{
                            alert("Value not to be blank.");
                        }

                    });
                });


            })(jQuery);

        </script>

HTML ++FORM++

        <tr>
            <td class="css-gen7 paragraph">Is premium paid?
                <input name="is_premium_016" value="yes" class="required"  type="radio">Yes
                <input name="is_premium_016" value="no" class="required"  type="radio">No
            </td>
            <td class="css-gen7">if not,why not?  <input name="if_not_017" type="text" class="required" style="width:30%"></td>
        </tr>