イベント関数は同時に複数の他の関数を呼び出すことができません

Question

私はサンプルフォーム検証をプレーンなjavascriptだけで行いました。私は2つの関数をイベントコールバック関数の中に格納することに決めてしまうまで、すべては大丈夫でした。私はそれを私のjavascriptファイルは、コードの少ない行を持つことができるようにした。コールバック関数は1つの関数しか実行できません。

var query = document.querySelector.bind(document); 
 

 
function isBlank(element) { 
 
    var isblank = (!element.value) ? true : false; 
 

 
    element.setAttribute('data-error', isblank); 
 

 
    return isblank; 
 
} 
 

 
function isInvalid(element, regex) { 
 
    var invalidValue = (!element.value.match(regex)) ? true : false; 
 

 
    element.setAttribute('data-error', invalidValue); 
 

 
    return invalidValue; 
 
} 
 

 
function checkInput(e) { 
 
    var $this = e.target; 
 
    return [ 
 
    isBlank($this), 
 
    isInvalid($this, /^[a-zA-Z ]*$/) 
 
    ]; 
 
} 
 

 
query('#name').addEventListener('blur', checkInput);

form input[name] { 
 
    border: 1px solid #ccc; 
 
} 
 

 
form input[data-error="true"] { 
 
    border-color: red; 
 
} 
 

 
form input[data-error="false"] { 
 
    border-color: #ccc; 
 
}

<form action="" method="post"> 
 
    <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br> 
 
    <input type="submit" value="Submit"> 
 
</form>

私はまた、次の2つのオプションを試してみましたが、それはどちらか動作しませんでした：

function checkInput(e) { 
    var $this = e.target; 
    return { 
    execute: [ 
     isBlank($this), 
     isInvalid($this, /^[a-zA-Z ]*$/) 
    ] 
    }; 
} 

function checkInput(e) { 
    var $this = e.target; 
    isBlank($this); 
    isInvalid($this, /^[a-zA-Z ]*$/); 
} 

は、どのように私はそれを修正するが、コードクリーナーとより組織を作ることができますか？

Answer 1

これを試しましたか？

var query = document.querySelector.bind(document); 

function isBlank(element) { 
    var isblank = (!element.value) ? true : false; 

    return isblank; 
} 

function isInvalid(element, regex) { 
    var invalidValue = (!element.value.match(regex)) ? true : false; 

    return invalidValue; 
} 

function checkInput(e) { 
    var $this = e.target; 
    element.setAttribute('data-error', (isBlank($this) || isInvalid($this, /^[a-zA-Z ]*$/))); 
} 

query('#name').addEventListener('blur', checkInput); 

機能の少なくとも一方がtrueを返す（およびエラーを発見した）場合にはtrueに「データ・エラー」を設定します

Answer 2

あなたのコードは、[OK]を実行しています。属性名を変更して追加されているかどうかを確認しました。問題は、最初に同じデータエラー属性と2番目の関数のオーバーライドを使用することです。エラーを表すクラスを追加および削除するだけでよいでしょうか。あなたが望むほどの誤りがあるよりも。

var query = document.querySelector.bind(document); 
 

 
function isBlank(element) { 
 
    var isblank = (!element.value) ? true : false; 
 

 
    element.setAttribute('data-error1', isblank); 
 

 
    return isblank; 
 
} 
 

 
function isInvalid(element, regex) { 
 
    var invalidValue = (!element.value.match(regex)) ? true : false; 
 

 
    element.setAttribute('data-error2', invalidValue); 
 

 
    return invalidValue; 
 
} 
 

 
function checkInput(e) { 
 
    var $this = e.target; 
 
    return [ 
 
    isBlank($this), 
 
    isInvalid($this, /^[a-zA-Z ]*$/) 
 
    ]; 
 
} 
 

 
query('#name').addEventListener('blur', checkInput);

form input[name] { 
 
    border: 1px solid #ccc; 
 
} 
 

 
form input[data-error="true"] { 
 
    border-color: red; 
 
} 
 

 
form input[data-error="false"] { 
 
    border-color: #ccc; 
 
}

<form action="" method="post"> 
 
    <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br> 
 
    <input type="submit" value="Submit"> 
 
</form>

Answer 3

あなたはこのようにそれを解決することができます。

element.attributeをisBlankおよびisInvalidの外側に設定することをおすすめします。他のコンテキストでこれらの関数を使用できるようになりました。

イベントハンドラのソース要素を使用する場合は、event.targetの代わりにthisを使用します。それはネストされた要素のいくつかの問題を解決します。あなたは、同じデータ・エラーの属性を使用し

var query = document.querySelector.bind(document); 
 

 
function isBlank(element) { 
 
    return (!element.value) ? true : false; 
 
} 
 

 
function isInvalid(element, regex) { 
 
    return (!element.value.match(regex)) ? true : false; 
 
} 
 

 
function checkInput(e) { 
 
    var isValid = true; 
 
    
 
    if(isBlank(this) || isInvalid(this, /^[a-zA-Z ]*$/)){ 
 
    isValid = false; 
 
    } 
 
    
 
    this.setAttribute('data-error', !isValid); 
 
} 
 

 
query('#name').addEventListener('blur', checkInput);

form input[name] { 
 
    border: 1px solid #ccc; 
 
} 
 

 
form input[data-error="true"] { 
 
    border-color: red; 
 
} 
 

 
form input[data-error="false"] { 
 
    border-color: #ccc; 
 
}

<form action="" method="post"> 
 
    <input type="text" name="name" id="name" placeholder="Name" data-error=""><span class="message"></span><br> 
 
    <input type="submit" value="Submit"> 
 
</form>