He estado tratando de hacer un proyecto paralelo para aprender a codificar sitios web y otras cosas.
lo que estoy tratando de hacer ahora es una simple validación de un formulario y mostrar mensajes de error cuando no se cumplen las reglas requeridas.
este es mi login.html
<html> <title>Login</title> <head> <link rel="stylesheet" href="csslogin.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src= "js/jquery.validate.js"></script> <script src= "js/loginform.js"></script> <head> <body> <h1 id="title"> Login Form </h1> <div id="firstblock"> <form id= loginform> <label id="formfield">Username:</label><br> <input type="text" name="username" placeholder="Enter your Username"><br> <label id="formfield">Password:</label><br> <input type="password" name="password" placeholder="Enter your Password"><br> <input type="submit" id="submitbtn" value="Login"><br> <input type="checkbox" id="rembme" name="rememberme" value="true"> <label type="text" id="remblabel" style="">Remember me</label> </form> </div> </body> </html>este es mi formulario de inicio de sesión.js
$(document).ready(function() { $('#loginform').validate({ rule:{ username:{ required: true, minlength: 5 }, password:{ required: true, } }, messages:{ username: { required: "Please Enter a Username", minlength: "Your Username Must Be At Least 5 Characters" }, password: { required: "Please Enter a Password:", } } }) })Al colocar el campo obligatorio en la entrada del archivo html, funciona bien, pero quiero aprender a vincularlo de esta manera. No estoy seguro de cómo verificar si el js se está importando correctamente, pero a partir de ahora mi loginform.js ni siquiera está usando las reglas o los mensajes que configuré, lo que me lleva a creer que estoy vinculando el enlace js cdn incorrecto que he probé varios diferentes o que me falta algún tipo de línea en mi archivo html para vincular mi archivo js.
Perdón por la publicación desordenada que no he publicado aquí en mucho tiempo y no estoy realmente seguro de cómo formatearla correctamente, así que simplemente arrojé todo, creo que alguien debería responder.
Algunas de las validaciones que busca se pueden lograr rápidamente usando solo html.
Atributos: "requerido" y "minlength"
<form id= loginform> <label for="username">Username:</label><br> <input id="username" type="text" name="username" placeholder="Enter your Username" required minlength="5"><br> <label for="password">Password:</label><br> <input id="password" type="password" name="password" placeholder="Enter your Password" required><br> <input type="submit" id="submitbtn" value="Login"><br> <input type="checkbox" id="rembme" name="rememberme" value="true"> <label for="rembme" type="text" style="">Remember me</label>Además, tenga en cuenta que puse la identificación dentro de todas las etiquetas de entrada y luego vinculé cada etiqueta con la propiedad "para". De esta manera, si hace clic en la etiqueta, la entrada asociada con ella gana el foco. Esta es una buena práctica
Ahora, con lo anterior obtienes los mensajes de validación para el usuario proporcionados por el navegador. Si aún quieres personalizar tú mismo los masajes échale un vistazo a este post
Y finalmente, si todavía quieres hacerlo con jquery, echa un vistazo a este código
la mejor práctica es insertar sus scripts al final de su archivo HTML antes de la etiqueta. su versión de jquery era antigua, pero su problema principal era un error tipográfico en la configuración de validación de jquery. en lugar de "regla", debe usar "reglas". https://jqueryvalidation.org/validar/
<HTML> <head> <title>Login</title> <link rel="stylesheet" href="csslogin.css" /> </head> <body> <h1 id="title">Login Form</h1> <div id="firstblock"> <form id="loginform" method="get" action=""> <label id="formfield">Username:</label><br /> <input type="text" name="username" placeholder="Enter your Username" /><br /> <label id="formfield">Password:</label><br /> <input type="password" name="password" placeholder="Enter your Password" /><br /> <input type="submit" id="submitbtn" value="Login" /><br /> <input type="checkbox" id="rembme" name="rememberme" value="true" /> <label type="text" id="remblabel" style="">Remember me</label> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <script> $(document).ready(function() { $("#loginform").validate({ rules: { username: { required: true, minlength: 5, }, password: { required: true, }, }, messages: { username: { required: "Please Enter a Username", minlength: "Your Username Must Be At Least 5 Characters", }, password: { required: "Please Enter a Password:", }, }, }); }); </script> </body> </html>