2017-12-04 29 views
0

名前、年齢、電子メールなどのフィールドを持つ小さなフォームを作成する必要があります。例えば:私のような(必要なタグを持つすべてのフィールドが空でないことを確認して、その後、いくつかのフィールドを検証するために、HTMLの自動検証を使用したいのでhtml自動検証後にjavascriptでhtmlフォームを検証する

<input id="name" type="text" required/> 

私は、検証に問題があります電子メール)。私はこのような入力要素を提出しています

<input type="submit" value="Submit" onclick="form.validate()" /> 

を問題はonclickの方法は、(()検証)常に自動検証の前に呼ばれ、私は何をしたいことは、自動検証aftherそのメソッドを呼び出すことであるということです終わり(それはすべての権利です)。私がテストするために使用しているjavascriptは次のようになります。

"use strict"; 
class Form { 
    constructor(){} 
    validate(){ 
     alert("validate"); 
    } 
} 
var form = new Form(); 

警告は常に表示されますが、自動検証はしません。送信ボタンにメソッドのonclickタグを入れないと、自動検証が機能します。私の問題について何か考えていますか?

答えて

0

あなたはあなたの形式のディレクティブng-submit使用する必要があります。

<form ng-submit="form.validate()" ng-controller="YourController">  
    <input type="text" ng-model="text" name="text" /> 
    <input type="submit" id="submit" value="Submit" /> 
</form> 

https://docs.angularjs.org/api/ng/directive/ngSubmit https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action

ロッキングを維持します!

+0

今では最初の自動検証を行いますが、からアラートjavascriptは表示されません。 – novayhulk14

+0

すべての入力が正しく完了すると、警告が発生します。 –

+0

フォームのすべてのフィールドを正しく入力すると、自動検証によってすべてが正しいと判断され、フォームが送信されますが、アラートは表示されないため、javascriptコードは実行されていないようです。 – novayhulk14

0

このメソッドはjQueryを使用します。最初に、フォーム送信時のデフォルトのアクションを防ぐ必要がある場合は、検証を行い、最後にフォームを送信します。以下の例。

フォーム:(jQueryを使って)

<form id="form"> 
    <input type="text" required> 
    <input type="submit" value="Submit!"> 
</form> 

Javascriptを:

$('#form').submit(function(ev) { 
    ev.preventDefault(); // to stop the form from submitting 
    /* Validations go here */ 
    form.validate(); 
    alert('here'); 
    this.submit(); // If all the validations succeeded 
}); 

のJavaScript(バニラ):

document.getElementById('form').addEventListener('submit', function(ev) { 
    ev.preventDefault(); // to stop the form from submitting 
    /* Validations go here */ 
    alert('here'); 
    this.submit(); // If all the validations succeeded 
});