bestsource

메일침프 JS 유효성 검사가 작동하지 않음

bestsource 2023. 6. 28. 21:52
반응형

메일침프 JS 유효성 검사가 작동하지 않음

저는 워드프레스 팝업 빌더로 복사된 메일침프의 내장된 양식 중 하나를 사용하고 있습니다.문제는 MailChimp 양식의 JS가 오류를 일으켜 양식의 유효성 검사가 작동하지 않는다는 것입니다.다음은 오류입니다.

Uncaught TypeError: Cannot read property 'replace' of undefined
// This error occurs in the file: mc-validate.js:198

다음은 전체 양식 코드입니다.

    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:500px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_c86e002570c2075b57186bd84_ee52af27a3" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

편집: 팝업에 사용하는 플러그인은 참으로 스마트한 팝업입니다.

실제로 스크립트가 페이지 바닥글로 이동하면 오류가 수정되지만, 돔에 작성되기 전에 스크립트가 변수를 호출하므로 논리적으로 항상 상태가 정의되지 않습니다.

저의 경우처럼 웹의 헤더에 스크립트를 넣고 싶다면, 사용할 수 없는 경우에 대비하여 url 변수에 값을 지정해야 하며, 그 값은 양식의 작업 필드에서 가져와야 합니다.

if (typeof url == 'undefined') {url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&amp;id=d1htsl3a46";}

기능은 다음과 같습니다.

getAjaxSubmitUrl: function () {var url = $ ("form # mc-embedded-subscribe-form"). attr ("action");if (typeof url == 'undefined') {url = "https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&amp;id=d1htsl3a46";}url = url.replace ("/ post? u =", "/ post-json? u =");url + = "& c =?";return url;},

도움이 되길 바랍니다!

이 경우 호스트 파일의 다음 코드가 원인이었습니다.

/**
 *  Grab the list subscribe url from the form action and make it work for an ajax post.
 */
getAjaxSubmitUrl: function() {
    var url = $("form#mc-embedded-subscribe-form").attr("action");
    url = url.replace("/post?u=", "/post-json?u=");
    url += "&c=?";
    return url;
},

시작하는 줄var url = …를 찾고 있습니다.FORM신분증을 가지고mc-embedded-subscribe-form이 ID를 가진 양식이 페이지에 없으면 스크립트가 실패합니다.OP의 코드에는 이 양식이 존재하는 것처럼 보이기 때문에 OP의 페이지에서 코드가 실패한 이유를 100% 확신할 수 없습니다.우리 페이지에서 양식의 ID를 변경했는데, 그것이 오류의 원인이었습니다.

아래의 @thirdender와 마찬가지로 호스트 파일 mc-validate.js의 코드가 원인이었습니다.그리고 우리는 정확하게 그것을 가지고 있었습니다.id양식을 배치했습니다. 

getAjaxSubmitUrl: function() {
  var url = $("form#mc-embedded-subscribe-form").attr("action");
  url = url.replace("/post?u=", "/post-json?u=");
  url += "&c=?";
  return url;
},

우리에게 해결책은 웹사이트 바닥글에 스크립트를 로드하는 것이었습니다.
이 장치를 다음 장치에 로드하여 올바르게 작동하지 않습니다.<head>부분.

이것이 누군가에게 도움이 되길 바랍니다.

저는 웹사이트에서 다양한 스크립트를 로딩하는 순서가 문제였습니다.그것을 가지고 노는 것이 문제를 해결했습니다.결정적으로, mc-validate.js는 스크립트 태그 앞에 연결되어야 합니다.

(function($) {window.fnames = new Array() ...

당신이 그 순서를 지켰다는 것을 알 수 있지만, 저처럼 약간 비슷한 문제를 가지고 있는 사람들을 돕기 위해 이 대답을 남기고 싶었습니다.

HTML 코드를 복사하여 사이트에 포함시키면 작동합니다.저의 경우 사이트가 느려져서 모든 메일침프 페이지가 나타나지 않았습니다.그래서 저는 다음 단계를 따랐습니다.

안전상의 이유로, CSS 링크를 기능에 연결합니다.enqueue_style로서의 php 파일:

function your_chosen_name_script_enqueue() {
  wp_enqueue_style('mailchimpcss', 'https://cdn-images.mailchimp.com/embedcode/classic-10_7.css'); wp_enqueue_script('jquery3.4','https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
}
add_action('wp_enqueue_scripts', 'your_chosen_name_script_enqueue');

해당 스타일 #mc_embed_signup{background:#ffff;...당신이 원한다면, 하지만 당신만의 스타일이 있다면 그것은 필요하지 않습니다.

당신이 사용하고 있는 페이지에 메일침프가 준 것과 같은 양식을 정확히 넣으세요. action="는 메일침프가 붙인 큰 이름이어야 합니다.

<div id="mc_embed_signup">
  <form action="https://yoursite.us85.list-manage.com/subscribe/post?u=13s79c67xxb4c8ad2339ce34a&amp;id=d1htsl3a46" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    ...
  </form>
</div>

jquery를 함수에 wp_enqueue_script로 포함시키기 때문에 아래 스크립트는 포함하지 않았습니다.

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

마지막으로 jquery 기능을 main.js 파일에 포함시켜 다음과 같이 수정했습니다.

jQuery(document).ready(function($) {
  // $() will work as an alias for jQuery() inside of this function
  window.fnames = new Array();
  window.ftypes = new Array();
  fnames[0] = "EMAIL";
  ftypes[0] = "email";
  fnames[1] = "FNAME";
  ftypes[1] = "text";
  fnames[2] = "LNAME";
  ftypes[2] = "text";
  fnames[3] = "ADDRESS";
  ftypes[3] = "address";
  fnames[4] = "PHONE";
  ftypes[4] = "phone";
});

https://developer.wordpress.org/reference/functions/wp_enqueue_script/ 에 따르면

jQuery에 종속된 스크립트를 큐에 넣을 때 WordPress의 jQuery는 noConflict 모드로 실행되므로 일반 $ 별칭을 사용할 수 없습니다.대신 전체 jQuery를 사용해야 합니다.또는 noConflict 래퍼 안에 $ 바로 가기를 사용하여 코드를 배치합니다."

jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    [ your code goes here ]
} );

잘 됐으면 좋겠습니다.

언급URL : https://stackoverflow.com/questions/31487474/mailchimp-js-validation-isnt-working

반응형

'bestsource' 카테고리의 다른 글

Firebase Cloud Messaging in Firebase Cloud Functions를 사용하여 푸시 알림을 보내려고 할 때 요청한 엔티티를 찾을 수 없습니다.  (0) 2023.06.28
드롭다운 목록 컨트롤 사용드롭다운 목록 컨트롤 사용s for asp.net (웹 양식)?  (0) 2023.06.28
UIScrollView 스크롤이 완료되었을 때 감지하는 방법  (0) 2023.06.28
Firebase Cloud Firestore에서 문서에 하위 컬렉션을 추가하는 방법  (0) 2023.06.28
예를 들어 목표-C에서 밀리초 단위로 정확한 시간을 얻으려면 어떻게 해야 합니다.  (0) 2023.06.28

'bestsource'의 다른글

  • 현재글메일침프 JS 유효성 검사가 작동하지 않음

관련글

댓글

티스토리툴바