Soy nuevo en JavaScript. Tengo un formulario en un archivo html que tiene algunos campos de texto. Cuando alguien hace clic en el botón Enviar, se llama a una función de JavaScript para realizar algún trabajo (en este caso, una simple alerta). Funciona como quería, cuando completo los campos de texto y hago clic en el botón Enviar, llama a la función de JavaScript y la función muestra una alerta. Sin embargo, el problema es que, cuando un usuario hace clic en el botón Enviar y deja algunos campos vacíos y/o no sigue el patrón de una dirección de correo electrónico, llama a la función de JavaScript (aunque HTML 5 haya mostrado advertencias en el formulario). Quiero que la función de JavaScript solo se llame si no hay advertencias de HTML, es decir, no hay campos vacíos y el usuario debe seguir el patrón de correo electrónico. Gracias por tu ayuda.
Código HTML:
<form id="myForm" method="post" role="form" class="contactForm"> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" /> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" /> <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea> <button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button> </form> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="alert.js"></script>Código Javascript (alerta.js):
function SubmitFormData() { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); alert("SHOW SOMETHING HERE"); }puede usar el atributo requerido en la entrada y una cosa más que puede llamar al formulario de envío de SubmitFormData () aquí está su código modificado:
function SubmitFormData() { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); alert("SHOW SOMETHING HERE"); } <form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();"> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/> <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea> <button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button> </form> <script src="http://code.jquery.com/jquery-latest.js"></script>Esta es la mejor solución de trabajo para lo que desea lograr mediante el uso del complemento JS de validación de formularios .
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <style> form label { display: inline-block; width: 100px; } form div { margin-bottom: 10px; } .error { color: red; margin-left: 5px; } label.error { display: inline; } </style> <script> $(document).ready(function() { $('form[id="second_form"]').validate({ rules: { name: 'required', user_email: { required: true, email: true, }, message: { required: true, } }, messages: { name: 'This field is required', user_email: 'Enter a valid email', message: 'This field is required' }, submitHandler: function(form) { form.submit(); } }); }); </script> </head> <body> <h2>Example 2:</h2> <form id="second_form" method="post" action=""> <div> <label for="name">Name:</label> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" /> </div> <div> <label for="email">Email</label> <input type="email" class="form-control" name="user_email" id="user_email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" /> </div> <div> <label for="message">message:</label> <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea> </div> <div> <input type="submit" value="Submit" /> </div> </form> </body> </html>La forma más fácil era proporcionar una solución solo HTML basada en el atributo required de un elemento de formulario, ya que el navegador se hará cargo de la validación de los elementos requeridos también por su type de elemento/control...
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/"> <input required type="text" name="name" id="name" class="form-control" placeholder="Your Name" /> <input required type="email" name="email" id="email" class="form-control" placeholder="Your Email" /> <textarea required name="message" id="message" class="form-control" rows="5" placeholder="Message"></textarea> <button type="submit" id="submitFormData" class="button button-a button-big button-rouded">Send Message</button> </form>Una validación personalizada genérica es mucho más compleja y laboriosa...
function validateControValue(elm) { let isValid = true; const elmType = elm.type; if (elmType !== 'button' && elmType !== 'submit') { const $elm = $(elm); const isEmpty = ($elm.val().trim() === ''); if (isEmpty) { $elm.val(''); $elm.addClass('validation-error'); } else { $elm.removeClass('validation-error'); } // non empty is valid, empty is invalid. isValid = !isEmpty; } return isValid; } function handleValidFormSubmit(/* evt */) { const isValidSubmitData = Array .from(this.elements) .every(validateControValue); return isValidSubmitData; } function main() { $('#myForm').on('submit', handleValidFormSubmit) } $(document) .ready(main); .validation-error { border: 1px solid #f00; } <form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/"> <input type="text" name="name" id="name" class="form-control" placeholder="Your Name" /> <input type="email" name="email" id="email" class="form-control" placeholder="Your Email" /> <textarea name="message" id="message" class="form-control" rows="5" placeholder="Message"></textarea> <button type="submit" id="submitFormData" class="button button-a button-big button-rouded">Send Message</button> </form> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- <script src="alert.js"></script> //-->