Modulo Ajax invia dopo la convalida degli elementi di input: javascript, jquery, html, ajax, forms

Ho un modulo che raccoglie alcune informazioni usando caselle di testo. Alcune caselle di testo hanno uno schema a strisce, ad es. alcune caselle di input accettano solo numeri.

Sono stato in grado di aggiungere la validazione usando l'attributo pattern del campo di input. http://www.w3schools.com/tags/att_input_pattern.asp

Tuttavia, quando l'utente invia il modulo, devo fare una richiesta post ajax a un end point diverso. Quindi, penso di dover effettuare una chiamata al metodo preventDefault () per impedire l'invio del modulo predefinito.

Ma quando chiamo preventDefault (), disabilita anche i campi di input di convalida.

Come posso ottenere campi di convalida ed effettuare una richiesta Ajax, solo se i campi di input superano la convalida.

risposte:

In entrambi i casi puoi usare questo:

Innanzitutto cambia il input[type="submit"] a questa:

<button onclick="submitThis()">Save</button>

function submitThis() {
var firstInput = $("#idoffirstinput).val(); // basic validation
if(firstInput == "correctinput") {
$.ajax({
// send the ajax form
})
}
}

Puoi validare separatamente ogni input usando la tecnica fornita lì, o quella che ho fornito. L'errore jQuery sarà lo stesso; Intendo la convalida.

Usa questo:

if(firstInput == "correctinput") {
// ajax form
} else {
// show the error popup!
}

Il punto di forza di questo è che puoi anche modellare il popup di dialouge degli errori. Piace

$("#errordiv").css("border", "1px solid #hexcode");

E tutto il resto è uguale!

HTML and jQuery:
<form id="details">
Phone no: <input type="text" id="phone_no" pattern="[A-Za-z]{3}">
<input type="submit" id="submit">
</form>

var input   = $("#phone_no").val();
if(input != "")
{
var YOUR_URL = "www.example.com";
var formData = $("#details").serialize();// If you want to pass that data to that   URL
$.post(YOUR_URL,formData,function(result){

});
}
else
{
return false;
}