jQuery: Как сделать проверку в jquery перед отправкой формы?

Question

У меня есть форма форма начальной загрузки, как показано ниже

<form id="loginForm" method="post" action="" role="form" class="ajax"> 
    <div class="form-group"> 
     <label for="userName"></label> 
     <input type="text" class="form-control" id="usrName"> 
    </div> 

    <div class="form-group"> 
     <label for="passWrd"></label> 
     <input type="password" class="form-control" id="passWrd"> 
    </div> 

    <div class="form-group"> 
     <button class="btn btn-default" type="button" id="loginButton">Login</button>  
    </div> 

Я делаю форму проверки в моей JQuery, как показано ниже. Как я могу вызвать метод submit() в моем коде? Как я могу сделать ajax-вызов для отправки содержимого формы после проверки в jQuery.

$(document).ready(function() { 

    function validateInput(id) { 
    if($("#"+id).val()==null || $("#"+id).val()=="") { 
     var div=$("#"+id).closest("div"); 
     div.addClass("has-error"); 
     return false; 
    } else { 
     var div=$("#"+id).closest("div"); 
     div.removeClass("has-error"); 
     div.addClass("has-success"); 
     return false; 
    }  
    } 
    $(#loginButton).click(function() { 
enter code here 
    if(!validateInput("userName")) 
    { 
     return false; 
    } 

    if(!validateInput("passWrd")) 
    { 
     return false; 
    } 

    }); 

}); 

Как я могу позвонить $ .ajax после завершения проверки в моем вышеприведенном коде?

P.S: Я не должен использовать какой-либо плагин jquery для проверки.

Answer 1

Этот код проверяет каждое поле ввода.

$(#loginButton).click(function() { 
    if (!$.trim($("input").val()) {  //check ALL input fields, see if they have valid (non-falsy) values 
    alert("some input needs fixin'!"); 
    } else { 
    submit(); //since you mentioned this in your post 
    $.ajax({});//or make an ajax call, or put it inside of a function and call that, the possibilities are endless.. 
    } 
}); 

Answer 2

$('#loginForm').submit() отправит форму.

Answer 3

Вы можете использовать плагин this. Это самый лучший и простой в использовании плагин, который я нашел для проверки формы.

Answer 4

Хотя это можно сделать несколькими способами, используя ваш пример, я вижу, что вы уже возвращаете false при отказе проверки. Возвращает true с конца вашего метода validateInput().

function validateInput(item) { 
    var div=item.closest("div"); 
    if(item.val()==null || item.val()=="") {   
    div.addClass("has-error"); 
    return false; 
    } else { 
    div.removeClass("has-error"); 
    div.addClass("has-success"); 
    return true; 
    } 
} 

Затем в обработчик события щелчка, проверьте возвращаемое значение и вызвать form.submit()

$('#loginButton').click(function() { 
    var isValid = true; 
    $('.form-control').each(function(){ 
     isValid &= validateInput($(this)); 
    }); 
    if (isValid) 
    { 
     var data = $('#loginForm').serialize(); 
     $.ajax({ 
     url: 'your endpoint', 
     type: 'POST', 
     data: data 
     }); 
    } 
}); 

представить форму.

Работает Plunkr.

Answer 5

Попробуйте это:

$(document).ready(function() { 
    function validateInput(id) { 
    var element = $("#"+id); 
    var success = false; 
    if (element.val() == null || element.val().trim() == "") { 
     element.closest("div").addClass("has-error"); 
    } else { 
     var div = element .closest("div"); 
     div.removeClass("has-error"); 
     div.addClass("has-success"); 
     success = true; 
    }  
    return success; 
    } 
    $(#loginButton).click(function() { 
    if (validateInput("usrName")) { 
     $('#loginForm').submit() 
    } 
    }); 

}); 

Answer 6

<div ng-class="{ 'form-group has-error has-feedback' : datos.campo.$invalid && !datos.campo.$pristine, 'form-group has-success has-feedback' : datos.campo.$valid}"> 
    <label class="control-label" for="campo">Modelo</label> 
     <input ng-model="data.campo" name="campo" type="text" class="form-control" id="campo" required> 
     <span ng-class="{'glyphicon glyphicon-remove form-control-feedback':datos.campo.$invalid && !datos.campo.$pristine, 'glyphicon glyphicon-ok form-control-feedback':datos.campo.$valid}"></span> 
    <span ng-show="datos.campo.$invalid && !datos.campo.$pristine" class="col-md-8 center badge badge-danger">Incorrecto</span> 
</div> 

Con Угловая JS эс Мась Facil validar Кампос, Checa este link