Operation of form when changing it from input to select [closed]

0

In a contact data submission form, I previously had a input in which the user entered their country. Now I had to change the input for a select , for the user to choose the country from a list.

Aesthetically everything works fine, but what does not work is sending the form.

HTML

<label>
                            <select name="country" id="country" required>
                                <option value="" disabled selected hidden>País</option>
                                <option value="Argentina">Argentina</option>
                                <option value="Bolivia">Bolivia </option>
                                <option value="Chile">Chile</option>
                                <option value="Colombia">Colombia</option>
                                <option value="Costa Rica">Costa Rica</option>
                                <option value="Cuba">Cuba</option>
                                <option value="Ecuador">Ecuador</option>
                                <option value="El Salvador">El Salvador</option>
                                <option value="Guayana Francesa">Guayana Francesa</option>
                                <option value="Granada">Granada</option>
                                <option value="Guatemala">Guatemala</option>
                                <option value="Guayana">Guayana</option>
                                <option value="Haití">Haití</option>
                                <option value="Honduras">Honduras</option>
                                <option value="Jamaica">Jamaica</option>
                                <option value="México">México</option>
                                <option value="Nicaragua">Nicaragua</option>
                                <option value="Panamá">Panamá</option>
                                <option value="Perú">Perú</option>
                                <option value="Puerto Rico">Puerto Rico</option>
                                <option value="República Dominicana">República Dominicana</option>
                                <option value="Surinam">Surinam</option>
                                <option value="Uruguay">Uruguay</option>
                                <option value="Venezuela">Venezuela</option>
                            </select>
                        </label>

JS

 $(document).ready(function() {
    $('#form').validate({
        rules: {
            firstname: {
                required: true,
                minlength: 2
            },
            lastname: {
                required: true,
                minlength: 2
            },
            country: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            repeatEmail: {
                required: true,
                email: true
            },
      terms: {
        required: true
      }
        },
        submitHandler: function(form) {
            //event.preventDefault();
            $('#submit').addClass('disabled').text('Enviando');
            $.ajax({
                url: '../services/form.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function() {
                    $('.message').html('Te suscribiste correctamente').addClass('success');
          $('#submit').text('Enviado');
                },
                error: function() {
                    $('.message').html('Hubo un error en el envío').addClass('error');
                }
            });
        }
    });

});
    
asked by TheWoodStudio 28.08.2017 в 16:18
source

1 answer

1

I believe that your error is due to your validation, the minlength attribute, may be wreaking havoc, only in the select:

country: {
    required: true,
    minlength: 2
 },

The Right thing to do:

country: {
  required: true 
},

The minlength attribute should be used only in input's.

    
answered by 28.08.2017 / 17:31
source