Предупреди success формуляр

То, за чем оно последует, так это следующее у меня есть формуляр для реестра и то, что я хочу, состоит в том, чтобы, в которое он был зарегистрирован, вышел один sweetAlert. Проблема эту, которая, нажав кнопку, выходит такой alert формуляром, не была санкционирована. Я хотел бы знать, как я делаю для того, чтобы одинокий alert показал себе, если формуляр полностью санкционирован. Я использую formValidation.io чтобы санкционировать мой формуляр. Я оставляю код утверждения:

$().ready(function () {

    $('#formularioRegistro').formValidation({// Validación datos capa cliente. TENER PRESENTE EL ID DEL FORM
        err: {container: 'tooltip'}, //muestra en tooltips
        icon: {valid: 'fa fa-thumbs-up', invalid: 'fa fa-thumbs-down', validating: 'fa fa-refresh'}, //iconos
        //locale: 'es_ES', //idioma - debe enlazar el archivo "es_ES.js"
        fields: {
            nombre: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un nombre válido '

                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'Solo letras, sin números o carácteres especiales'
                    },
                    stringLength: {
                        min: 3,
                        message: 'Mínimo 3 carácteres'
                    }
                }
            },
            apellido: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un apellido válido'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'Solo letras, sin números o carácteres especiales'
                    },
                    stringLength: {
                        min: 3,
                        message: 'Mínimo 3 carácteres'
                    }
                }
            },
            documento: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un documento válido'
                    },
                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'Solo números'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Mínimo 5 carácteres'
                    }
                }
            },
            correo: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un correo válido'
                    },
                    regexp: {
                        regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/,
                        message: 'No se aceptan carácteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Mínimo 5 carácteres'
                    }
                }
            },
            contrasena: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese una contraseña válida'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
                        message: 'No se aceptan carácteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 carácteres'
                    }
                }
            },
            repetirContraseña: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Las contraseñas no coinciden'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
                        message: 'No se aceptan carácteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 carácteres'
                    },
                    identical: {
                        field: 'contraseña',
                        message: 'Las contraseñas no coinciden'
                    }
                }
            },
            direccion: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese una dirección válida'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'No se aceptan carácteres especiales'
                    },
                    stringLength: {
                        min: 10,
                        message: 'Mínimo 10 carácteres'
                    }
                }
            },
            tel: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un télefono válido'
                    },
                    regexp: {
                        regexp: /^[0-9-]+$/,
                        message: 'Sólo numeros'
                    },
                    stringLength: {
                        min: 7,
                        message: 'Mínimo 7 carácteres'
                    }
                }

            },
            ciudad: {
                validators: {
                    callback: {
                        message: 'Debe elegir su ciudad',
                        callback: function (value, validator, $field) {
                            // Get the selected options
                            var options = validator.getFieldElements('ciudad').val();
                            return (options !== null && options.length >= 1 && options.length <= 4);
                        }
                    }
                }
            },
               genero: {
                validators: {
                    callback: {
                        message: 'Debe elegir su género',
                        callback: function (value, validator, $field) {
                            // Get the selected options
                            var options = validator.getFieldElements('genero').val();
                            return (options !== null && options.length >= 1 && options.length <= 10);
                        }
                    }
                }
            },
            'confirmar[]': {
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Debe aceptar términos y condiciones'
                    },
                    stringLength: {
                        max: 1,
                        message: 'Debe aceptar términos y condiciones'
                    }
                }
            }


        }
    });
});

Что существует событие так называемый success.form.fv, но не, как осуществление бдительности sweetAlert, которую я хочу, чтобы он вышел:

swal ("Зарегистрированный правильно!", "Спасибо за регистрирование!", "success")

Спасибо за помогание мне.


Прицел мой формуляр этот:

Реестр пользователей

                                <!-- nombre-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="nombre" >Nombres:</label>  
                                    <div class="col-md-6">
                                        <input id="nombre" name="nombre" type="text" placeholder="" maxlength="30" class="form-control input-md"   tabindex="1" ></input>
                                    </div>
                                </div>

                                <!-- Apellido-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="apellido">Apellidos:</label>  
                                    <div class="col-md-6">
                                        <input id="apellido" name="apellido" type="text" maxlength="30" placeholder="" class="form-control input-md"  tabindex="2"></input>
                                    </div>
                                </div>

                                <!-- Documento-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="documento">N° Documento:</label>  
                                    <div class="col-md-6">
                                        <input id="documento" name="documento" type="text" maxlength="10" placeholder="" class="form-control input-md"  tabindex="3"></input>
                                    </div>
                                </div>
                                <!-- Email-->

                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="correo">E-mail:</label>  
                                    <div class="col-md-6">
                                        <input id="correo"  name="correo" type="email" class="form-control"  placeholder="abcde@hotmail.com"  tabindex="4"   ></input>
                                    </div>
                                </div>
                                <!-- Contraseña-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="contrasena">Contraseña:</label>  
                                    <div class="col-md-6">
                                        <input id="contrasena"  name="contrasena" type="password" class="form-control" placeholder="********"  tabindex="5" ></input> 
                                    </div>
                                </div>
                                <!-- Confirmar contraseña-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="repetirContraseña">Confirmar contraseña:</label>  
                                    <div class="col-md-6">
                                        <input id="repetirContraseña" name="repetirContraseña" type="password" class="form-control" placeholder="********"  tabindex="6"></input>
                                    </div>
                                </div>
                                <!-- Direccion-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="direccion">Dirección:</label>  
                                    <div class="col-md-6">
                                        <input id="direccion" name="direccion" type="text" placeholder="" class="form-control input-md" maxlength="50" tabindex="7"></input>

                                    </div>
                                </div>

                                <!-- Telefono-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="tel">Teléfono:</label>  
                                    <div class="col-md-6">
                                        <input id="tel" name="tel" type="text" maxlength="15" placeholder="" class="form-control input-md"  tabindex="8"></input>
                                    </div>
                                </div>

                                <!-- Ciudad -->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="ciudad">Ciudad de residencia:</label>
                                    <div class="col-md-6">
                                        <select id="ciudad" name="ciudad" class="form-control"  tabindex="10" >
                                            <option selected="true" disabled="true">Seleccione Ciudad...</option>
                                            <c:forEach var="objCiudad" items="#{controladorCiudad.listarCiudades()}">
                                                <option value="#{objCiudad.idCiudad}">#{objCiudad.nombreCiudad}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <!-- Fecha -->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="fechaN">Fecha de Nacimiento:</label>  
                                    <div class="col-md-6">
                                        <input id="fechaN" name="fechaN" type="date" placeholder="" class="form-control input-md" max="1998-04-07" min="1950-12-31" tabindex="11"></input>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="genero">Género:</label>
                                    <div class="col-md-6">
                                        <select id="genero" name="genero" class="form-control"  tabindex="10" >
                                            <option selected="true" disabled="true">Seleccione Genero...</option>
                                            <option value="Masculino">Masculino</option>
                                            <option value="Femenino">Femenino</option>

                                        </select>
                                    </div>
                                </div>



                                <div class="form-group">
                                    <div class="col-sm-offset-1 col-sm-10">
                                        <div class="checkbox">
                                            <label class="col-md-5 control-label"></label>
                                            <div class="col-md-8">
                                                <label><input type="checkbox" id="confirmar" name="confirmar" ></input>Acepto términos y condiciones</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="condicion" class="col-md-12">
                                    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                    <u>Para registarse en Effective Orders debe diligenciar todos los campos</u>
                                </div> 

                                <!-- Boton -->
                                <div id="boton">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="Boton"></label>
                                        <div class="col-md-4">
                                            <h:commandButton id="Boton" type="submit" class="btn btn-success" value="Registrarme" action="#{controladorUsuario.registrarUsuario()}" tabindex="12"></h:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </h:form>

И утверждение - рукописный шрифт, который я поместил первых


Леандро привет, служит мне чудом до тех пор, пока я не ввожу информацию в компьютер selects, там, если единственное изобилие это поле разом посылает бдительность, ты мог бы помогать мне? спасибо

var isvalid = false;

$(function() {
  
    $('#profileForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            }
        }
    }).on('err.field.fv', function(e, data) {
         isvalid = false;
    }).on('success.field.fv', function(e, data) {
         isvalid = true;
    });;

    $('#setValueButton').on('click', function() {
      
      $('form').data('formValidation').validate();
      
      if(isvalid){
        alert("es valido");
      }
      
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="button" class="btn btn-primary" id="setValueButton">Set values</button>
        </div>
    </div>
</form>
0
задан 15.08.2019, 20:52
1 ответ

Проанализируй это осуществление.

Краев, поскольку используют err.field.fv и success.field.fv, чтобы распределять flag, который позволяет trabjar с кнопкой показывая alert.

В твоем случае заменяет alert javascript из-за sweetAlert.

var isvalid = false;

$(function() {
  
    $('#profileForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            }
        }
    }).on('err.field.fv', function(e, data) {
         isvalid = false;
    }).on('success.field.fv', function(e, data) {
         isvalid = true;
    });;

    $('#setValueButton').on('click', function() {
      
      $('form').data('formValidation').validate();
      
      if(isvalid){
        alert("es valido");
      }
      
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="button" class="btn btn-primary" id="setValueButton">Set values</button>
        </div>
    </div>
</form>
1
ответ дан 03.12.2019, 22:41
  • 1
    Леандро привет, служит мне чудом до тех пор, пока я не ввожу информацию в компьютер selects, ах и # 237; если единственное изобилие это поле разом посылает бдительность, ты мог бы помогать мне? спасибо. –  Lina Cortés 08.04.2016, 03:25
  • 2
    я не понял, как это select? утверждение распредели в переменную isvalid, если этот изюм или нет, но потом эта ты используешь ее, где тебе было нужно, ли он в click кнопки, я не вижу, потому что select был должен затрагивать ее –  Leandro Tuttini 08.04.2016, 03:34