태그 보관물: javascript

javascript

사용자 정의 메타 박스 값 및 필수 필드 확인 전에 필드 유효성 검사가

내가 본 적이없는 것은 사용자 정의 포스트 유형 메타 박스에 대해 특정 양식 필드가 올바르게 채워 졌는지 검증하는 가장 좋은 방법입니다.

필자는 생성 할 수있는 메타 박스의 사용자 정의 필드를 가장 잘 검증하는 방법에 대한 전문가 의견을 얻고 자합니다. 나의 관심은 :

  • 게시물이 게시 / 업데이트되기 전에 필드 유효성 검사가 수행되도록 보장
  • 다른 워드 프레스 자바 스크립트와 충돌하지 않는 클래스 / 코드 활용
  • 필요에 따라 특정 필드를 정의 할 수 있지만 다른 필드는 선택 사항 일 수 있습니다
  • 이메일 형식과 같은 것들에 대한 정규식을 포함하여 사용자 정의 가능한 규칙을 기반으로 필드의 유효성을 검사합니다
  • 오류 /주의 사항의 시각적 표시를 제어

미리 감사드립니다!

답변

가장 쉬운 방법은 jQuery Validate 플러그인을 통해 Javascript 유효성 검사를 추가하는 것입니다 . 가장 기본적인 연습은 다음과 같습니다.

add_meta_box 호출 근처에서 jQuery Validate 플러그인과 간단한 스크립트의 JS 파일을 큐에 넣습니다.

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'path/to/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'path/to/my_script.js');
}

그런 다음 my_script.js에 다음을 포함하십시오.

jQuery().ready(function() {
    jQuery("#post").validate();
});

이것은 포스트 폼에 대한 검증을 가능하게합니다. 그런 다음 사용자 정의 필드를 정의하는 add_meta_box 콜백에서 확인하려는 각 필드에 대해 “필수”클래스를 추가합니다.

<input type="text" name="my_custom_text_field" class="required"/>

게시물이 저장 / 게시 / 업데이트 될 때 클래스에 “필수”인 모든 필드의 유효성이 검사됩니다. 다른 모든 유효성 검사 옵션 (규칙, 오류 스타일 등)은 my_script.js의 document.ready 함수에서 설정할 수 있습니다. 모든 옵션에 대해서는 jQuery Validate 문서를 확인하십시오.

답변

jQuery 유효성 검사를 추가하는 완전한 기본 코드 :

  1. 유효성 검사 스크립트를 대기열에 넣습니다. jQuery가 이미 enqued되어 있다고 가정합니다.

    add_action('admin_enqueue_scripts',function($id){
    $validation',$validation_js_url = #your validation.js source;
    wp_register_script( 'validation',$validation_js_url,array(),'',true );
    wp_enqueue_script( 'validation' );
});

  2. js 파일 또는 스크립트 태그에서 :

    jQuery(document).ready(function($){
    var form = $("form[name='post']");
    $(form).find("input[type='submit']").click(function(e){
        e.preventDefault();
        $(form).validate();

        if($(form).valid())
        {
            $("#ajax-loading").show();
            $(form).submit();
        }else{
            $("#publish").removeClass().addClass("button-primary");
            $("#ajax-loading").hide();
        }
    });
});

  3. 완료 🙂

답변

나는이 코드를 매우 유용하게 사용했다.

$(form).find("input[type='submit']").click(function(e){

에:

$(form).find("#publish").click(function(e){

기본 양식 안에 다른 양식이 있으면 스크립트를 시작합니다.

과:

$(form).submit();

에:

$(this).submit();

‘첫 번째 줄은 게시물을 초안으로 만 저장하므로 더 이상 게시 할 수 없습니다.

여기에 모든 것을 기록 : http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/

답변

PHP 코드를 사용하여 메타 박스 필드의 유효성을 검사하는 문제를 해결하기 위해이 접근법을 찾았습니다.

https://tommcfarlin.com/post-meta-data-error-messages/

이것이 도움이되기를 바랍니다 (유사한 시나리오에서 저에게 효과적입니다)

답변

서버 측의 유효성을 검사하려면 가장 쉬운 옵션은 고급 사용자 정의 필드 를 사용하여 사용자 정의 필드 레이아웃을 정의한 다음 유효성 검사 필드 추가 기능을 사용하여 WordPress 관리자에서 필드 당 유효성 검사를 설정하는 것입니다.

답변