То, что я сделал поясню это следующее: Бланк HTML/PHP:JQuery входной динамический контроль
<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="gstyle.css">
\t </head>
\t <body>
\t <script type="text/javascript" src="resources/jquery-1.11.2.min.js"></script>
\t <script type="text/javascript" src="resources/jquery-ui/jquery-ui.min.js"></script>
\t <script type="text/javascript" src="script.js"></script>
\t \t \t <form method="POST">
\t \t \t \t <table border=0>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="descripcion">Usuario:</td>
\t \t \t \t \t \t <td><input class="campos" type="text" name="user" placeholder="Nombre de usuario"></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="descripcion">Contraseña:
\t \t \t \t \t \t <td><input class="campos" type="password" name="passwd" placeholder="Contraseña"></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="descripcion">Confirmar contraseña:</td>
\t \t \t \t \t \t <td><input class="campos" type="password" name="confpasswd" placeholder="Confirmar Contraseña"></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="descripcion">Correo:</td>
\t \t \t \t \t \t <td><input class="campos" type="text" name="correo" placeholder="E-Mail"></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="descripcion">Confirmar correo:</td>
\t \t \t \t \t \t <td><input class="campos" type="text" name="confcorreo" placeholder="Confirmar E-Mail"></td>
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t \t <br>
\t \t \t \t <input class="botones" type="submit" name="send" value="Registrar">
</form>
\t </div>
\t </body>
</html>
Это простая regiter формульный, с классами CSS. Тогда у меня есть CSS лист с текущими стилями и также правильные и неправильные классы готовы к JQuery:
#form {
\t font-family: Tahoma;
\t font-size: 20px;
\t margin-top: 200px;
\t margin-left: auto;
\t margin-right: auto;
\t padding: 20px 10px 20px 50px;
\t width: 700px;
\t text-align: center;
\t border-radius: 5px;
\t background: url("imagenes/div_fondo.jpg");
\t background-size: cover;
\t background-position: center center;
\t background-repeat: no-repeat;
\t background-attachment:fixed;
\t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
}
#head {
\t color: white;
\t font-family: Tahoma;
\t font-size: 20px;
\t margin-top: 20px;
\t margin-left: auto;
\t margin-right: auto;
\t padding: 10px 0px 10px 0px;
\t width: 1500px;
\t text-align: center;
\t border-radius: 5px;
\t background: url("imagenes/div_fondo.jpg");
\t background-size: cover;
\t background-position: center center;
\t background-repeat: no-repeat;
\t background-attachment:fixed;
\t text-shadow: 0px 0px 15px #2222FF;
\t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
}
td {
\t padding-top: 15px;
}
#titulo{
\t text-shadow: 0px 0px 8px #2222FF;
\t line-height: 5px;
\t color: white;
}
.descripcion{
\t text-shadow: 0px 0px 8px #2222FF;
\t color: white;
\t text-align:right;
\t font-size: 20px;
}
.campos{
\t -webkit-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78);
\t -moz-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78);
\t box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78);
height: 40px;
margin: 15px;
padding: 12px;
width: 300px;
font-size: 18px;
border: 0;
\t border-radius: 3px;
}
.campos:focus {
\t -webkit-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1);
\t -moz-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1);
\t box-shadow: 0px 0px 13px 6px rgba(36,160,255,1);
}
.correcto{
\t -webkit-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1);
\t -moz-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1);
\t box-shadow: 0px 0px 13px 6px rgba(0,255,81,1);
}
.incorrecto{
\t -webkit-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1);
\t -moz-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1);
\t box-shadow: 0px 0px 13px 6px rgba(255,0,0,1);
}
.botones {
\t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8);
\t background-color:#7C1919;
\t width: 250px;
\t height: 50px;
\t border: 0;
\t font-size: 20px;
}
$(document).ready(function(){
\t var user = $("input[name=user]").val();
\t if(user === "Vitama") {
\t \t $("input[name=user]").addClass("correcto");
\t }
});
Я suposed этот сценарий будет делать эту вещь, но я был неправ. Некоторая помощь, пожалуйста, как я могу сделать ее динамичной ?.
Что вопрос? Какая у вас проблема? Хорошо, что вы разместили свой код, но вы недостаточно объясняете проблему. – j08691
Проблема заключалась в том, что я предположил, что то, что я сделал, сделает живую динамическую компоновку, но это было не так, мне нужно было перезагрузить страницу для проверки. – Vitama