如果其中一个字段为空而其他字段不为空,则无法使用jquery进行验证

时间:2019-02-27 17:25:12

标签: jquery jquery-validate

如果表单中的一个被填充而另一个为空则尝试进行验证;如果两个字段都为空则不应该进行任何验证;如果一个字段被文本填充而另一个为空则应该得到验证验证。我尝试使用代码,但无法正常工作。

<form action="#" method="post" id="myform" role="form" enctype="multipart/form-data">
    <div class="col-md-8">
        <label for="name"><b>Name</b><span class="mandatory">
                <font color="red">*</font>
            </span></label>
        <input type="text" placeholder="Enter Your Name" name="uname" id="uname" class="mygroup">
    </div>
    <div class="col-md-8">
        <label for="email"><b>Email</b><span class="mandatory">
                <font color="red">*</font>
            </span></label>
        <input type="text" placeholder="Enter Email" name="email" id="email" class="mygroup">
    </div>
    <div class="clearfix">
        <button id="submit" name="submit_contact" type="submit" class="signupbtn">Submit</button>
    </div>
</form>


$(document).ready(function() {

$('#myform').validate({
    rules: {
        email: {
            required: function(element) {
                return $('#uname').is(':filled');
            }
        }
    }
});

 });

小提琴链接:https://jsfiddle.net/actqp9y3/

2 个答案:

答案 0 :(得分:3)

<form action="#" method="post"  id="myform" role="form" enctype="multipart/form-data">  
                <div class="col-md-8">
                    <label for="name"><b>Name</b><span class="mandatory"><font color="red">*</font></span></label>
                    <input type="text" placeholder="Enter Your Name" name="uname" id="uname" class="mygroup">
                </div>
                <div class="col-md-8">
                    <label for="email"><b>Email</b><span class="mandatory"><font color="red">*</font></span></label>
                    <input type="text" placeholder="Enter Email" name="email"  id="email" class="mygroup">
                </div>
                <div class="clearfix">
                  <button  id="submit" name="submit_contact" type="submit" class="signupbtn">Submit</button>         
                </div>
            </form>

JS:

$(document).ready(function() {
$('#myform').validate({
    rules: {
        email: {
            required: function(element) {
                return $('#uname').is(':filled');
            }

        },
        uname: {
            required: function(element) {
                return $('#email').is(':filled');
            }       
        }              
    }      
});
});

小提琴链接:https://jsfiddle.net/rnmejfLy/

答案 1 :(得分:1)

如果我理解正确,

$(document).ready(function() {
    $('#myform').validate({
    	rules:{
    		'email':{
    			required:function(){
    				return $('#uname').val().length > 0;
    			}
    		},
    		'uname':{
    			required:function(){
    				  return $('#email').val().length > 0;

    			}
    		}
    	}
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<form action="#" method="post"  id="myform" role="form" enctype="multipart/form-data">	
					<div class="col-md-8">
						<label for="name"><b>Name</b><span class="mandatory"><font color="red">*</font></span></label>
						<input type="text" placeholder="Enter Your Name" name="uname" id="uname" class="mygroup">
					</div>
					<div class="col-md-8">
						<label for="email"><b>Email</b><span class="mandatory"><font color="red">*</font></span></label>
						<input type="text" placeholder="Enter Email" name="email"  id="email" class="mygroup">
					</div>
					<div class="clearfix">
					  <button  id="submit" name="submit_contact" type="submit" class="signupbtn">Submit</button>         
					</div>
</form>