programing

jQuery Validation Plugin을 사용하여 양식이 프로그래밍적으로 유효한지 확인하는 방법

powerit 2023. 10. 20. 14:51
반응형

jQuery Validation Plugin을 사용하여 양식이 프로그래밍적으로 유효한지 확인하는 방법

저는 몇 개의 버튼이 있는 양식을 가지고 있고 http://jquery.bassistance.de/validate/ 의 jQuery Validation Plugin을 사용하고 있습니다.jquery validation plugin에서 폼이 유효한 상태로 간주되는지 확인할 수 있는 방법이 있는지 알고 싶습니다.

jQuery Validation 플러그인에서 사용:

$("#form_id").valid();

선택한 양식이 올바른지 또는 선택한 모든 요소가 올바른지 확인합니다.validate ()은(는) 이 메서드를 사용하여 확인하기 전에 양식에 호출해야 합니다.

양식이 포함된 경우id='form_id'이미 가지고 있는 형태입니다..validate()요청했습니다.

2015년 답변: 현대 브라우저에서는 이것을 즉시 사용할 수 있습니다. jQuery의 HTML5 CheckValidity API를 사용하면 됩니다.이를 위해 jquery-html5-valid 모듈도 만들었습니다.

npm install jquery-html5-validity

그러면:

var $ = require('jquery')
require("jquery-html5-validity")($);

그러면 다음을 실행할 수 있습니다.

$('.some-class').isValid()

true

@mikemaccana 답변은 유용합니다.

그리고 https://github.com/ryanseddon/H5F 도 이용했습니다.http://microjs.com 에서 확인할 수 있습니다.일종의 폴리필이며 다음과 같이 사용할 수 있습니다(예에서는 jQuery가 사용됨).

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

입력 그룹의 경우 @mikemaccana의 답변을 기반으로 개선된 버전을 사용할 수 있습니다.

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

이제 양식이 유효한지 확인하는 데 이를 사용할 수 있습니다.

if(!$(".form-control").isValid){
    return;
}

동일한 기술을 사용하여 모든 오류 메시지를 가져올 수 있습니다.

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}

유효한 () 방법.

http://docs.jquery.com/Plugins/Validation/valid

i 기여:정답을 맞추기에 너무 늦지는 않습니다.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

이렇게 하면 양식의 '이름' 값을 사용하여 표준 제출을 방해하지 않고 '필수' 필드에 대한 기본 HTML5 유효성 검사가 수행됩니다.

마젠토의 경우 아래와 같이 양식의 유효성을 확인합니다.

다음을 시도해 볼 수 있습니다.

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

이것이 당신에게 도움이 되기를 바랍니다!

양식을 제출하기 전에 확인하는 경우:

$(function(){
    $('.needs-validation').on('submit', function(event){
        if(!event.target.checkValidity()){
            // Form didn't pass validation
            event.preventDefault();
            $(this).addClass('was-validated');
        }
    })
})

사용할 수 없습니다.$('form')[0].checkValidity()보기에 여러 양식이 있습니다.

언급URL : https://stackoverflow.com/questions/6658937/how-to-check-if-a-form-is-valid-programmatically-using-jquery-validation-plugin

반응형