Xác thực jQuery - Hai trường, chỉ yêu cầu điền vào một

Question

Tôi đang sử dụng jQuery Validation Plugin trên biểu mẫu của mình. Trên mẫu của tôi, tôi có trường 'Điện thoại' và 'Số điện thoại di động' cánh đồng.

Làm cách nào để tôi thực hiện nó để người dùng phải điền vào một trong số đó, nhưng có thể là trường?

Answer 1

này trông giống như những gì bạn cần phải sử dụng dependency-callback

Điều này sẽ cho phép bạn làm là:

Làm cho các yếu tố cần thiết, tùy thuộc vào kết quả của các cuộc gọi lại nhất định.

Sau đó, bạn có thể đặt quy tắc xác thực required trên hai trường điện thoại sẽ chỉ được yêu cầu dựa trên sự trở lại từ hàm gọi lại; do đó bạn có thể đặt quy tắc trên trường điện thoại để nói yêu cầu quy tắc này chỉ khi trường di động trống và ngược lại cho trường di động.

này chưa được kiểm chứng nhưng về mặt lý thuyết

rules: { 
    telephone: { 
     required: function(element) { 
      return $("#mobile").is(':empty'); 
     } 
    }, 
    mobile: { 
     required: function(element) { 
      return $("#telephone").is(':empty'); 
     } 
    } 
} 

Hãy chắc chắn để kiểm tra ý kiến ​​/ câu trả lời khác cho câu trả lời cập nhật càng tốt.

Answer 2

Đến đây để tìm câu trả lời tương tự. Tìm thấy bài viết trên rất hữu ích. Cảm ơn.

Tôi đã mở rộng giải pháp này để kiểm tra xem trường khác có hợp lệ không, thay vì chỉ "không trống". Điều này đảm bảo rằng người dùng nhập Số điện thoại hợp lệ trước khi xóa lớp "bắt buộc" khỏi trường Di động và ngược lại.

Mobile: { 
    required: function(element) { 
    return (!$("#Phone").hasClass('valid')); 
    } 
}, 
Phone: { 
    required: function(element) { 
     return (!$("#Mobile").hasClass('valid')); 
    } 
} 

Answer 3

Tôi nghĩ rằng cách chính xác để làm điều này là sử dụng phương pháp "require_from_group".

Bạn có thể CheckIt trên http://jqueryvalidation.org/require_from_group-method/

Các ví dụ là chính xác những gì bạn đang tìm kiếm:

<input class="left phone-group" id="mobile_phone" name="mobile_phone"> 
<input class="left phone-group" id="home_phone" name="home_phone"> 
<input class="left phone-group" id="work_phone" name="work_phone"> 

<script> 
$("#form").validate({ 
    rules: { 
    mobile_phone: { 
     require_from_group: [1, ".phone-group"] 
    }, 
    home_phone: { 
     require_from_group: [1, ".phone-group"] 
    }, 
    work_phone: { 
     require_from_group: [1, ".phone-group"] 
    } 
    } 
}); 
</script> 

Đó là bắt buộc để bao gồm thêm-methods.js

Answer 4

Yêu cầu là Validation cần phải là một trong hai C hoặc (A và B) là bắt buộc. Điều làm việc đối với tôi là:

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) { 
     returnVal = true; 
    } 
    return returnVal; 
}, 'Either C or A and B is required'); 


$('#Afield.form-control').change(function(){ 
    $(this).valid(); 
    $("#Bfield").valid(); 
    $("#Cfield").valid(); 

}); 

$('#Bfield.form-control').change(function(){ 
    $(this).valid(); 
    $("#Afield").valid(); 
    $("#Cfield").valid(); 
}); 

$('#Cfield.form-control').change(function(){ 
    $(this).valid(); 
    $("#Bfield").valid(); 
    $("#Afield").valid(); 
}); 


within rules I have 
Afield: "multipeFieldValidator", 
Bfield: "multipeFieldValidator", 
Cfield: "multipeFieldValidator" 

Answer 5

tôi đã gặp rắc rối là .is(':empty') vì vậy đây là tùy chọn làm việc của tôi chẳng hạn.

Trước:

rules: { 
    name:  {required: true}, 
    email:  {required: true}, 
    phone:  {required: true} 
} 

Tất cả các lĩnh vực là yêu cầu.Nhưng tôi muốn email và/hoặc điện thoại như vậy để tạo ra các 'hoặc':

rules: { 
    name:  {required: true}, 
    email:  {required: 
        function() { 
         //returns true if phone is empty 
         return !$("#phone").val(); 
        } 
       }, 
    phone:  {required: 
        function() { 
         //returns true if email is empty 
         return !$("#email").val(); 
        } 
       } 
}, 
messages: { 
    email: "Email is required if no phone number is given.", 
    phone: "A phone number is required if no phone email is given." 
} 

Và bạn sẽ thấy rằng tôi đã thêm các tùy chọn messages để cung cấp cho người dùng một số thông tin có ý nghĩa bởi vì các thông điệp mặc định sẽ nói rằng mỗi trường là bắt buộc mà không đúng trong tình huống này.

Answer 6

$(document).ready(function() { 
 
    jQuery.validator.addMethod("mobile10d", function (value, element) { 
 
     return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value); 
 
    }, "Please enter a valid 10 digit phone number."); 
 
    $("#form_id").validate({ 
 
     rules: { 
 
      mobile: { 
 
       required: "#telephone:blank", 
 
       mobile10d: true 
 
      }, 
 
      telephone: { 
 
       required: "#mobile:blank", 
 
       mobile10d: true 
 
      } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
 
<form class="" action="" method="POST" id="form_id"> 
 
    <div class="col-md-4 form-group"> 
 
     <label class="form-control">Mobile<span class="required">*</span></label> 
 
     <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9"> 
 
    </div> 
 
    <div class="col-md-4 form-group"> 
 
     <label class="form-control">Telephone<span class="required">*</span></label> 
 
     <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <input type="submit" name="" value="Submit" class="apply-now-btn"> 
 
    </div> 
 
</form>