Form for mobile phones

Question

I would like to know how I do a form validation so that do not leave the fields blank on mobile, I have done several modes, pc works but mobile did not work in any way, as I would do it?

<script language="JavaScript">
    function ValidaSemPreenchimento(form) {
        for (i = 0; i < form.length; i++) {
            var obg = form[i].obrigatorio;
            if (obg == 1) {
                if (form[i].value == "") {
                    var nome = form[i].name
                    alert("Os campos chave é obrigatório.")
                    form[i].focus();
                    return false
                }
            }
        }
        return true
    }

</script>

<form name="form" id="form" action="send.php" method="post" onSubmit="return ValidaSemPreenchimento(this)">

Answer 1

This doesn’t work and makes your code fail:

var obg = form[i].obrigatorio;

Like obrigatorio is not a standard HTML attribute, there is no automatic property of the same name in the object. You need to use getAttribute, and if you want your HTML to validate (such as HTML5), you need to prefix it data- in the attribute name, thus:

<input name="bla" data-obrigatorio="1">

And then you can take the amount like this:

obg = form[i].getAttribute('data-obrigatorio');

The full function would be:

function ValidaSemPreenchimento(form) {
    var i, obg, nome;
    for (i = 0; i < form.length; i++) {
        obg = form[i].getAttribute('data-obrigatorio'):
        if (obg == 1) {
            if (form[i].value == "") {
                nome = form[i].name;
                alert("O campo " + nome + " é obrigatório.")
                form[i].focus();
                return false;
            }
        }
    }
    return true;
}

Answer 2

Why don’t you use jQuery ? It will be simpler not to let the input go blank if the user tries to send the form with white fields.

You can use this simple plugin jQuery.

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

Example working with this code : http://jsfiddle.net/xs5vrrso/

Other options : https://jqueryvalidation.org/validate

Plugins : https://jqueryvalidation.org/category/plugin/