Así que soy nuevo en el código java script, aprendiendo en realidad y me encontré con esta validación. Durante la validación del formulario, pude validar el nombre, el asunto y el mensaje, pero no entendí cómo puedo validar el correo electrónico. Intenté hacerlo y aprendí, pero no entrené bien. Además, si hay alguna forma de establecer un límite mínimo de palabras en lugar de un límite mínimo de caracteres en el cuadro de mensaje, ayúdenos con eso también. Gracias por adelantado
const name = document.getElementById("fname"); const message = document.getElementById("message"); const sub = document.getElementById("subject") function validate() { var isError = false; var errMessage = ''; if (name.value === "" || name.value == null) { isError = true; errMessage += "Please Enter Your Name\n"; } if (sub.value === "" || sub.value == null) { isError = true; errMessage += "Please Enter a Subject\n"; } if (message.value < 40) { isError = true; errMessage += "Your Message Should be Longer"; } if (isError) { alert(errMessage); return false; } else { return true; } } .contact-col { flex-basis: 48%; margin-bottom: 30px; } .contact-col div { display: flex; align-items: center; margin-bottom: 40px; } .contact-col div .fa { font-size: 28px; color: #f7a335; margin: 10px; margin-right: 30px; } .contact-col div p { padding: 0; } .contact-col div h5 { font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; } .contact-col input, .contact-col textarea { width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border: 1px solid #ccc; box-sizing: border-box; } .red-btn { display: inline-block; text-decoration: none; color: #f7a335; border: 1px solid #f7a335; padding: 12px 34px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .red-btn:hover { color: #fff; border: solid#f7a335; background: #f7a335; transition: 1s; } <div class="contact-col"> <form onsubmit="return validate()"> <input type="text" placeholder="Enter Your Name" id="fname"> <input type="email" placeholder="Enter E-mail ID"> <input type="text" placeholder="Enter Your Subject" id="subject"> <textarea rows="8" placeholder="Message" id="message"></textarea> <button type="submit" class="red-btn">Send Message</button> </form> </div>Hola encontré una ayuda para ti.
Puede hacer la coincidencia con RegExp.
Aquí está mi propio RegExp:
/.*\@.*\.\w{2,3}/gAquí hay un RegExp que encontré en Internet:
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/Y este es tu código para probar:
const name = document.getElementById("fname"); const message = document.getElementById("message"); const sub = document.getElementById("subject"); const email = document.getElementById("email") function validate() { var isError = false; var errMessage = ''; if (name.value === "" || name.value == null) { isError = true; errMessage += "Please Enter Your Name\n"; } if (sub.value === "" || sub.value == null) { isError = true; errMessage += "Please Enter a Subject\n"; } if (message.value < 40) { isError = true; errMessage += "Your Message Should be Longer\n"; } console.log(email.value.match(/.*\@.*\.\w{2,3}/g)) if (email.value === "" || email.value.match(/.*\@.*\.\w{2,3}/g) === null){ isError = true; errMessage += "Please Enter a Valid Email"; } if (isError) { alert(errMessage); return false; } else { return true; } } .contact-col { flex-basis: 48%; margin-bottom: 30px; } .contact-col div { display: flex; align-items: center; margin-bottom: 40px; } .contact-col div .fa { font-size: 28px; color: #f7a335; margin: 10px; margin-right: 30px; } .contact-col div p { padding: 0; } .contact-col div h5 { font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; } .contact-col input, .contact-col textarea { width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border: 1px solid #ccc; box-sizing: border-box; } .red-btn { display: inline-block; text-decoration: none; color: #f7a335; border: 1px solid #f7a335; padding: 12px 34px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .red-btn:hover { color: #fff; border: solid#f7a335; background: #f7a335; transition: 1s; } <div class="contact-col"> <form onsubmit="return validate()"> <input type="text" placeholder="Enter Your Name" id="fname"> <input type="text" placeholder="Enter E-mail ID" id="email"> <input type="text" placeholder="Enter Your Subject" id="subject"> <textarea rows="8" placeholder="Message" id="message"></textarea> <button type="submit" class="red-btn">Send Message</button> </form> </div>Aviso : cambio el tipo de entrada del correo electrónico a texto para probar la validación
Lo hice para el correo electrónico, puedes hacerlo para el resto aprendiendo expresiones regulares: tutorial de REGEX
HTML
<div class="contact-col"> <form name="form1" action="#"> <input type='text' name='text1' /> <input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)" /> </form> </div>CSS
.contact-col { flex-basis: 48%; margin-bottom: 30px; } .contact-col div { display: flex; align-items: center; margin-bottom: 40px; } .contact-col div .fa { font-size: 28px; color: #f7a335; margin: 10px; margin-right: 30px; } .contact-col div p { padding: 0; } .contact-col div h5 { font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; } .contact-col input, .contact-col textarea { width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border: 1px solid #ccc; box-sizing: border-box; } .red-btn { display: inline-block; text-decoration: none; color: #f7a335; border: 1px solid #f7a335; padding: 12px 34px; font-size: 13px; background: transparent; position: relative; cursor: pointer; } .red-btn:hover { color: #fff; border: solid#f7a335; background: #f7a335; transition: 1s; }JS
function ValidateEmail(inputText) { var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; if (inputText.value.match(mailformat)) { alert("Valid email address!"); document.form1.text1.focus(); return true; } else { alert("You have entered an invalid email address!"); document.form1.text1.focus(); return false; } } const validateForm = () => { let errorFlag = false; const atposition = email.trim().indexOf('@'); const dotposition = email.trim().lastIndexOf('.'); if(atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.trim().length) { setemailError('Please enter a valid email Id'); errorFlag = true; } if (errorFlag) { throw new Error('Form validation failed'); } }Específicamente, pruebe la parte de expresiones regulares del código anterior. Espero que sea útil.