jQuery：フォームを送信する前にjqueryで検証を行う方法は？

Question

私は以下のように私はjQueryでフォームの検証を行っています

<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> 

以下のように私は、フォームのブートストラップの形を持っています。自分のコードでsubmit()メソッドを呼び出すにはどうすればいいですか？つまり、jQueryで検証後にフォームコンテンツを送信するためにajax呼び出しを行うにはどうすればよいですか。

$(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を返すことがわかります。 validateInput（）メソッドの最後からtrueを返します。

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> 

コン角度JS ES MAS FACIL validarカンポス、Checa este link