Validate all inputs in SUBMIT

Question

Validate all inputs in SUBMIT

Navigation

#1 by (4 votes)
#2 by (3 votes)

0

I have a function that validates my fields in the focusout event, however, I now need to go through all the fields in submit of form , I know I should use for , but I do not know how. >

$("input[type='text'],textarea").focusout(function () {
    validar($(this))
});

$("#formcontato").submit(function (event) {
    event.preventDefault();
    //O for entraria aqui?
});

$('input, textarea').keypress(function (e) {
    if (e.which == 13 && validar()) {
        request();
        return false;
    }
});

function request() {
    $.ajax({
        url: "minha api...",
        method: "POST",
        data: $(this).serialize(),
        dataType: "json",
        beforeSend: function () {
            //antesEnvio();
        },
        success: function () {
            //sucessoRequest();
        },
        error: function () {
            //erroRequest();
        }
    });
}


function validar(input) {
    var valido = false;
    if (input.attr("id") === "email") {
        var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_'{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
        if (filtro.test(input.val())) {
            input.css("border-color", "green");
        } else {
            input.css("border-color", "red");
            valido = false;
        }
    }
    else if (input.val() === "") {
        input.css("border-color", "red");
        valido = false;
    }
    else if (input.val() != "") {
        input.css("border-color", "green");
    }

    return valido;
}

javascript jquery ajax

asked by anonymous 20.10.2017 / 13:13

2 answers

3

To validate text and email in submit you can combine the type plus required of HTML5 that it will not allow submission if the data is invalid.

Example

<form>
    <input type="email" required>E-mail
    <br>
    <input type="text" required>Texto
    <br>
    <input type="submit">Enviar
</form>

20.10.2017 / 13:39

Why in the second example (unlike the first) does the result come out concatenated and not added? Select parent element with javascript (without Jquery) [duplicate]

score 4 · Accepted Answer

Following the same validation pattern that you are using now, I say to do the following:

First you should make your validate () function return true whenever the field is OK, and continue returning false when something is wrong when filling in the field.

Then just put the code below on the submit of your form.

It would look like this:

$("#formcontato").submit(function (event) {
    event.preventDefault();
    var success =[],
        inputs = this.elements;

    for (var i = 0, length = inputs.length; i < length; i++ {
        success.push(validar($(inputs[i])));
    }

    if (success.indexOf(false) >= 0) {
        return;
    }

    this.submit();
});

Explaining what I did:

The variable success is an array. At each loop the validate () function will return true or false (if the field is ok or not), and this return is always inserted into the array success variable via the push () / p>

The push () method is used to insert a new value at the end of an array.

That is, at the end of the loop our array will be populated with several true and false

Following ...

The indexOf () method is used to search an array for a given value. If it finds the value passed as argument it returns the position inside the array (index) where the value is. If it does NOT find it it simply returns the value -1 .

In our case I check if there is a FALSE in the success array. If it does, I'll stop the script before calling submit () manually.