사용자 정의 메타 박스 값 및 필수 필드 확인


16

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

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

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

미리 감사드립니다!

답변:


21

가장 쉬운 방법은 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 문서를 확인하십시오.


감사합니다. 내일 사용해 볼 수 있지만 다른 유효성 검사를 수행하는 방법을 설명해 주시겠습니까? 예를 들어, 올바른 이메일 주소를 확인하고 XX 자 이하 여야하며 양식 필드가 채워 졌는지 확인합니다.
NetConstructor.com

또한 게시물이 저장 / 업데이트되기 전에 확인됩니까? 그렇지 않다면 어떻게해야합니까?
NetConstructor.com

jQuery Validation 플러그인 (내 답변에 링크 됨)의 예제와 설명서는 이러한 모든 작업을 수행하는 방법을 보여줍니다. 유효성 검사는 기본적으로 제출시 발생하지만 사용자 정의 필드의 모든 양식 요소가 변경되거나 변경 될 때 트리거 할 수 있습니다.
danblaker

나는이 솔루션을 구현했지만 매우 유망한 것처럼 보이지만 'submitHandler'에 무엇을 넣을 것인가? jquery.validate로 유효성을 검사 한 후 Wordpress는 아무 작업도 수행하지 않습니다 (저장 buttun은 애니메이션 상태로 유지됨). 아기를 WP로 다시 보내는 방법은 무엇입니까?
mike23

2
필수 필드가 비어있을 때 (또는 다른 유효성 검사가 실패 할 때) 게시 단추를 정상 상태로 되돌리려 고하는 경우 submitHandler로 아무 작업도 수행 할 필요가 없습니다. 유효성 검사가 실패하면 validate () 코드를 편집하여 버튼을 변경하십시오. jQuery ( "# post"). validate ({invalidHandler : function () {jQuery ( '# publish'). removeClass ( 'button-primary-disabled'); jQuery ( '# ajax-loading'). css ( 'visibility', 'hidden');}});
danblaker

2

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. 완료 :)


서버 쪽은 어떻습니까?
NetConstructor.com

2

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

$(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/


2

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

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

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


이 링크가 질문에 대한 답변을 제공 할 수 있지만 여기에 답변의 필수 부분을 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않을 수 있습니다.
Gabriel

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.