Jquery完整表单验证问题

时间:2016-05-26 17:18:30

标签: javascript php jquery validation

我正在使用php表单,其中表单正在使用jquery进行验证。现在以这种形式有单选按钮列表。如果用户单击“是”,则不会验证与该单选按钮列表相关的文本框。如果用户单击否,则应该验证与该单选按钮列表相关的文本框..

但现在问题是我之前的开发人员验证了这样的表格:

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>

此代码验证完整表单如何捕获单选按钮列表值,如果用户勾选是,我如何停止验证文本框?

我希望你明白我的意思。

由于

3 个答案:

答案 0 :(得分:0)

试试这个:

$('#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?

答案 1 :(得分:0)

所以,只有在用户点击否时才要执行验证?那是对的吗?这里有一个可能对您有用的代码:假设上面的假设是正确的。

<强> 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>

答案 2 :(得分:0)

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>