How to Get the validated Jquery property

Asked

Viewed 35 times

-1

I have a question about the Jquery validate. I can use it normally. but I need a validation if the user chooses an option in the "SELECT > OPTION" form, I have two options, "YES", "NO". If the user chooses "YES" will appear another field for him to fill it, but there is my doubt, I am not getting changes the attribution of the fields Rules that was not mandatory, to TRUE, in case he click register and he has not typed in this fields that appeared.

Someone there has a suggestion, but I want to continue using Jquery validate:

Here is my Jquery Code:

$('#form-visitantes').validate({
rules: {
nomecompleto: {required: true},
sexo: {required: true},
fone: {required: true},
email: {required: true},
foi_convidado: {required: false} // esse campos nao e obrigatorio, ele so aparece no formulario caso o usuario informe fui convidado
},
messages: {
nomecompleto: {required: 'Campo Obrigatório'},
sexo: {required: 'Campo Obrigatório'},
fone: {required: 'Campo Obrigatório'},
email: {required: 'Campo Obrigatório'},
foi_convidado: {required: 'Campo Obrigatório'}

},
submitHandler: function (form) {
var dados = $(form).serialize();
$.ajax({
    type: "POST",
    url: URL_POST,
    data: dados,
    dataType: 'JSON',
    success: function (data) {
if (data.retorno === true) {
$(".msg-result").html('<div class="bg-success text-center p-20">' + data.mensagem + '</div>');
    document.getElementById("form-visitantes").reset();
} else {
$(".msg-result").html('<div class="bg-danger text-center p-20">' + data.mensagem + '</div>');
}
    }
});
return false;
},
errorClass: "text-danger",
errorElement: "span",
highlight: function (element, errorClass, validClass) {
$(element).parents('.control-group').addClass('text-danger');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('text-danger');
$(element).parents('.control-group').addClass('success');
}
});

javascript
  • 2

    Welcome to [en.so]. I realized that you are creating multiple questions for the same problem, when it won’t actually help you get an answer faster, instead read the guide [Ask] and do a [tour]to learn a little more about how the site works to increase your chances of getting a good response.Here are some guidelines that will help you: Stack Overflow Survival Guide in English (short version).

  • When you want to put a question in evidence make an edit that automatically goes to the top of the list.

  • Remove this question. As both are in evidence you may happen to close both

  • Does this Answer your Question? Jquery validate (Rules)

1 answer

1


Use the method .rules() of Validate to remove or add the required to the field. You can do this with the method .change() select.

For example, the code elemento.rules("remove", "required") removes the required of the countryside, already the elemento.rules("add", "required") readicione the required.

Take an example:

$("[name='convidado']").change(function(){
   $("[name='foi_convidado']")
   .attr("type", this.value == "nao" ? "hidden" : "text")
   .rules(this.value == "nao" ? "remove" : "add", "required");
   
   if(this.value == "nao"){
      $("#foi_convidado-error").remove();
   }
   
});

$('#form-visitantes').validate({
   rules: {
      foi_convidado: {required: false} // esse campos nao e obrigatorio, ele so aparece no formulario caso o usuario informe fui convidado
   },
   messages: {
      foi_convidado: {required: 'Campo Obrigatório'}
   },
   submitHandler: function (form) {
      console.log("form enviado");
   }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<form id="form-visitantes">
   <select name="convidado">
      <option value="nao">Não</option>
      <option value="sim">Sim</option>
   </select>
   <input name="foi_convidado" type="hidden">
   <div class="msg-result"></div>
   <button>Enviar</button>
</form>

  • 1

    Thank you very much Sam, now I understand!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.