Я работаю над проектом, и я застрял с этим фрагментом кода, это форма, которую я хочу проверить благодаря плагину jQuery Validation, а также хочу, чтобы, когда регистрация была завершена, она показывала мнеоповещение (с использованием alerttify), указывающее, что оно работает, и после этого все поля очищаются (включая цвет и материал проверки) на случай, если я захочу зарегистрировать кого-то еще. Я работаю с коллегой и соединила наши коды. Итак, я знаю, что проблема в сценарии. Как я покажу вам, он показывает, что проверка работает отлично, но не вставляет данные, если я нажимаю «Reguser Usuario», ничего не происходит, проблема с идентификаторами, «usuario_registro» и «nuevo_usuario». Вопрос в том, что есть способ заставить их работать, только для этой формы или лучше, заставить ее работать только с одним, который является правильным способом.
PHP
div class="card-header">
<b>Registrar Usuario</b>
</div>
<div class="card-body">
<form role="form" id="usuario_registro" class="justify-content-center mx-3 my-1" align="center" enctype="multipart/form-data" action="" method="post">
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="nombr_usua">Nombre: </label>
<input type="text" class="form-control" name="nombr_usua" autocomplete="off" id="nombr_usua" placeholder="Carlos" maxlength="20" onkeyup="this.value = this.value.toUpperCase();">
</div>
Конец формы
<div class="form-row">
<div class="col form-group">
<button type="submit" class="btn btn-warning btn-block"><i class="fa fa-user"></i> Registrar Usuario</button>
<button type="reset" class="btn btn-light btn-block"><i class="fa fa-undo"></i> Limpiar</button>
</div>
</div>
</form>
И весь сценарий, над которым я работаю ...
<script type="text/javascript">
$(document).ready(function(){
//nuevo usuario
$('#nuevo_usuario').click(function(e){
e.preventDefault();
var nombr_usua = $('#nombr_usua').val();
var apeli_usua = $('#apeli_usua').val();
var email_usua = $('#email_usua').val();
var usuar_usua = $('#usuar_usua').val();
var contr_usua = $('#contr_usua').val();
//var action = 'registrar_usuario';
var parametros = new FormData($('#usuario_registro')[0]);
//INICIO DE AJAX
$.ajax({
url:'../ajax/usuario.php',
type: 'POST',
async: true,
data: parametros,
contentType : false,
processData: false,
beforesend: function(){
},
success: function(response)
{
console.log(response);
if (response == 'incorrecto') {
console.log(response);
alertify.error('El usuario y/o correo ya existe.');
}else{
console.log(response);
alertify.success('El usuario se registro correctamente.');
$('#nombr_usua').val('');
$('#apeli_usua').val('');
$('#email_usua').val('');
$('#usuar_usua').val('');
$('#contr_usua').val('');
}
},
error: function(error)
{
},
});
// Aqui
});
});
$( "#usuario_registro" ).validate( {
rules: {
nombr_usua: {
required: true,
lettersonly: true,
minlength: 2
},
apeli_usua: {
required: true,
lettersonly: true,
minlength: 2
},
usuar_usua: {
required: true,
minlength: 2,
remote: {
url: "sistema/usuario_usuario_availability.php",
type: "post",
data:
{
usuar_usua: function()
{
return $('#usuario_registro :input[name="usuar_usua"]').val();
}
}
}
},
contr_usua: {
required: true,
minlength: 4
},
confirm_password: {
required: true,
minlength: 4,
equalTo: "#contr_usua"
},
email_usua: {
required: true,
email: true,
remote: {
url: "sistema/usuario_email_availability.php",
type: "post",
data:
{
email_usua: function()
{
return $('#usuario_registro :input[name="email_usua"]').val();
}
}
}
},
},
messages: {
nombr_usua: {
required: "Ingrese su Nombre",
lettersonly: "Tu Nombre solo debe contener letras sin espacios",
minlength: "Tu Nombre debe contener al menos 2 caracteres"
},
apeli_usua: {
required: "Ingrese su Apellido",
lettersonly: "Tu Apellido solo debe contener letras sin espacios",
minlength: "Tu Apellido debe contener al menos 2 caracteres"
},
usuar_usua: {
required: "Ingrese un Nombre de Usuario",
minlength: "Tu Nombre de Usuario debe contener al menos 2 caracteres",
remote: jQuery.validator.format("{0} no esta disponible")
},
contr_usua: {
required: "Ingrese una Contraseña",
minlength: "Tu Contraseña debe contener al menos 5 caracteres"
},
confirm_password: {
required: "Ingrese una Contraseña",
minlength: "Tu Contraseña debe contener al menos 5 caracteres",
equalTo: "Ingrese la Misma Contraseña"
},
email_usua: {
required: "Ingrese una Dirección de Correo Electrónico Válida",
email: "Ingrese una Dirección de Correo Electrónico Válida",
remote: jQuery.validator.format("{0} no esta disponible")
}
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `invalid-feedback` class to the error element
error.addClass( "invalid-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.next( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
}
} );
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[A-Z^\s]+$/i.test(value);
}, "Letters only please");
</script>
Итак, надеюсь, что каждый может помочь мне с этим, сводит меня с ума. Оставьте несколько снимков вида:
