두 번째 시도에서만 처리기를 제출하십시오.

Invisible reCaptcha이 실행되기 전에 1000hz bootstrap validator을 양식에 사용하고 있습니다. 그렇게하려면 jQuery 제출 처리기를 사용해야했습니다.두 번째 시도에서만 처리기를 제출하십시오.

문제는 제출 단추를 두 번 클릭해야 처리기가 작동한다는 것입니다. 첫 번째 클릭에서 처리기를 우회하여 양식이 제출되고 보이지 않는 reCaptcha가 실행되지 않고 물론 오류가 발생합니다. 이것을 JS

<form role="form" data-toggle="validator" data-disable="true" id="contactform" method="post" action="result.php"> 
    <div class="form-group"><label for="InputName1">Envianos un E-mail</label><input type="text" class="form-control" name="nameofuser" placeholder="Nombre, Apellido" required> 
    </div> 
    <div class="form-group"><label for="InputEmail1">Email</label><input type="email" class="form-control" name="email" placeholder="Tu E-mail" required data-error="Porfavor, ingrese una dirección de Email valida."> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"><label for="InputName1">Mensaje</label><textarea class="form-control" rows="5" name="comment" required></textarea> 
    </div> 
    <div id='recaptcha' class="g-recaptcha" 
    data-sitekey="6LfCKjQUAAAAAPSp2YVmv-Yv2sOIPW_gp6CLVBUj" 
    data-callback="onCompleted" 
    data-size="invisible"> 
    </div> 
    <button type="submit" id="submit" style="font-size: 24px;" class="btn btn-box openSans" >Enviar</button> 
</form>

그리고 :

이

양식입니다

누군가가 문제를 보여주는 페이지 여기에 콘솔을보고 싶은 경우

$("#contactform").submit(function(e) { 

    $('#contactform').validator().on('submit', function (e) { 
    if (e.isDefaultPrevented()) { 
     // handle the invalid form... 
     console.log("FORM INVALIDO"); 
    } else { 
     // everything looks good! 
     if (!grecaptcha.getResponse()) { 
     console.log('captcha not yet completed.'); 
     event.preventDefault(); //prevent form submit 
     grecaptcha.execute(); 
     } else { 
     console.log('form really submitted.'); 
     } 
    } 
    }) 
}); 

onCompleted = function() { 
    console.log('captcha completed.'); 
    $("#contactform").submit(); 
}

: https://ccromatica.com/contacto

출처

2017-11-23 Gaspar

을

제출 콜백 내에 이벤트 핸들러를 정의하고 있습니다.

코드 $('#contactform').validator().on('submit')은 양식을 처음 제출할 때까지 등록되지 않습니다. 두 번째로 양식을 제출하면 이벤트 처리기가 작동하고 수행 할 작업을 수행합니다.

가장 간단한 해결책은 위에 언급 된 것과 같은 모든 이벤트 핸들러를 제출 기능 외부로 이동시키는 것입니다.

이벤트 처리기를 정의 할 때마다 다른 조건에 따라 정의되기보다는 먼저 실행되도록하십시오.

출처

2017-11-23 23:45:18

제출 기능을 제거 했으므로 이제 이벤트 핸들러는 첫 번째 클릭에서 콘솔이 보여주는 것보다 훌륭하게 작동합니다. 폼은 두 번째 클릭시에만 result.php로 보냅니다. – Gaspar

첫 번째 및 두 번째 클릭시 콘솔에 표시되는 내용은 무엇입니까? 유효성 검사를 통과했다고 가정하면 양식 제출을 차단해야하는 것은 없습니다. 'event'가 정의되어 있지 않으면'event.preventDefault();'가 있음을 알 수 있습니다. 'e.preventDefault(); '가되어야합니다. –

e.preventDefault()를 수정했습니다; 첫 번째 클릭 : captcha 아직 완료되지 않았습니다. captcha가 완료되었습니다. 양식이 실제로 제출되었습니다. 두 번째로 클릭 할 때 : 양식이 실제로 제출되었습니다. 그래서 두 가지 클릭 모두에서 논리가 작동합니다. – Gaspar

두 번째 시도에서만 처리기를 제출하십시오.

답변

관련 문제