Validate mailchimp form before sending

1

I have a Mailchimp form and in the respective input I have the attribute required but when I hit send in the form it sends me to the error validation page of Mailchimp and I do not like that problem to occur.

I would like the typical HTML5 message to come out of "complete this field", I do not know if it has to do strictly with the Mailchimp form generated from your page or I can change something in my HTML

I leave the code of the form.

html

<div id="mc_embed_signup" class="Contact-form">
        <form action="//toncandigital.us13.list-manage.com/subscribe/post?u=8a3c37fbd77ba8932cd9f1252&amp;id=ea21260d99" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
         <div id="mc_embed_signup_scroll">
         <div class="mc-field-group">
            <input type="text" value="" name="FNAME" class="Contact-input " id="mce-FNAME" placeholder="Nombre" required>
        </div>
        <div class="mc-field-group">
            <input type="text" value="" name="LNAME" class="Contact-input " id="mce-LNAME" placeholder="Apellido" required>
        </div>
        <div class="mc-field-group">
            <input type="email" value="" name="EMAIL" class="Contact-input required email" id="mce-EMAIL" placeholder="[email protected]*" required>
        </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;" aria-hidden="true"><input type="text" name="b_f5094e5fb00e00f72d45453f8_442a8b9d87" tabindex="-1" value="">    </div>
            <div class="clear"><input type="submit" value="Suscríbeme" name="subscribe" id="mc-embedded-subscribe" class="Contact-input btn"></div>
            </div>
        </form>
    </div>
    
asked by ikenshu 15.08.2016 в 21:03
source

1 answer

1

You can use this piece of code that I normally use from the front-end side

$("#enviar_datos").click(function(e){
     var nombre = $("#name").val();
     var correo = $("#email").val();
     var div_error = $("#error");
     var formulario = $("#form-reg");

    if(nombre == "" || correo == "" ||  (correo.indexOf('@', 0) == -1 || correo.indexOf('.', 0) == -1)){
        if(nombre == ""){
           div_error.html("<p>Te falta registrar tu nombre</p>");
           div_error.show();
           return false;
        }else if(correo == ""){
           div_error.html("<p>Te falta registrar tu correo</p>");
           div_error.show();
           return false;
           }else{
              div_error.html("<p>El correo introducido no es correcto</p>");
              div_error.show();
              return false;
        }
    }else if(div_error.is(":visible") && nombre != "" && correo != ""){                    
        div_error.hide();
        return true;   
    }
 });

Where:

    <form id = "form-reg" action="">
       <input type="text" id="name" name=""/>
       <input type="text" id="email" name=""/>
       <div id="error" class="error"></div>
       <button type="submit" name="enviar" id="enviar_datos">enviar</button>
   </form>
    
answered by 17.08.2016 в 21:46