Validate fields from a select by jquery

Question

Validate fields from a select by jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a form using step wizard as per the link below:

It works correctly, but I've seen that field validation only works for input fields. How could I do to validate also combobox fields? Check out his jquery:

<script>
$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-success').addClass('btn-default');
            $item.addClass('btn-success');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-success').trigger('click');
});
</script>

The select would be this:

<select name="Estado" class="form-control" required="required">
   <option value="">Selecione</option>
   <option value="RJ">Rio de Janeiro</option>
   <option value="SP">São Paulo</option>
</select>

The complete code is found in the link that I went through because I am copying faithfully as developed by the author.

jquery

asked by anonymous 15.09.2018 / 18:12

2 answers

0

Form validation with jQuery

    $(document).ready(function () {

        $("#meuForm").validate({
            rules: {
                Estado: {
                    required: true
                }
            },
            messages: {
    Estado: "Selecione uma opção"
    
  },        
     submitHandler: function (form) { // para demo
                console.log('validado');
                return false;
            }
        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

<form id="meuForm">
  <select name="Estado" class="form-control" required="required">
        <option value="">Selecione</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="SP">São Paulo</option>
  </select>
        <br/>
        <input type="submit" value="Validar"/>
    </form>

15.09.2018 / 20:34

Show data from the mysql database on a php / html page Read user input without using the prompt function

score 1 · Accepted Answer

To validate the fields of a select you have two options (which I know).

The first one is using required inside the select tag (which you are already doing).

<form id="form">
  <select name="Estado" class="form-control" required="required">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <input type="submit" />
</form>

Remembering that required is not supported by Safari (the others are normal, only the Edge and IE that is only from version 10).

If you want to do something more personalized you can do it another way. See the example:

$('#estado').on('change', function(){
    $('#resultado').text(!!this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="form">
  <select name="Estado" class="form-control" id="estado">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <div id="resultado"></div>
</form>

From this you could do a customization in the style of the form you are implementing. See:

$('#estado').on('change', function() {
  if (this.value == false) {
    this.classList.add('error');
  } else {
    this.classList.remove('error');
  }
});

.error {
  border: 2px solid #a94442;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="form">
  <select name="Estado" class="form-control" id="estado">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <div id="resultado"></div>
</form>

Remembering that in the examples I used a bit of "pure" JavaScript and in parts with jQuery. But, you could do everything with just jQuery, they would change little things.