web-dev-qa-db-ja.com

複数のJavaScript関数を送信する

誰かが複数の機能をオンサブミットする方法を知っていますか？私が意図したことは、onsubmitがこれらすべての関数がtrueを返すかどうかをチェックし、それらすべてがtrueを返す場合、action = "checked.html"を実行することでした。

_<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return validateName() || validatePhone() || validateAddress() ||
validateEmail()">
_

ただし、実際に起こったことは、コンピューターがコードを左から右にチェックし、次の関数の結果が前の関数に置き換わり、最後まで続きます。したがって、最初の3つの関数がすべてfalseを返したとしても、最後の関数がtrueである限り、コンピューターはaction = "checked.html"を実行しますが、これは私が意図したことではありません...これは、私がそれを修正しようとしている4時間のようなものでした：Sありがとうございます！

また、私が<form onsubmit="return verify1() && verify2()">のようなことを行おうとしたとき、それは機能しません。確認することは、次のものではなく、verify1（）をチェックすることだけです... :(

CLARIFCATION：送信時に4つの検証関数を呼び出します。4つすべての関数がtrueを返さない限り送信を禁止する必要がありますが、4つすべての関数がfalseを返しても常に4つすべてを呼び出す必要があります。

javascriptformsfunctiononsubmit
8
Maria

&の代わりに&&を使用してください。

&&は短絡評価を使用するため、左側のオペランドが偽である場合、右側のオペランドを評価しません。

&は常に両方のオペランドを評価します。

onsubmit="return !!(validateName() & validatePhone()
                      & validateAddress() & validateEmail());"

編集：すみません、&が実際のブール値を返さないことを忘れていました。式を括弧で囲み、二重の!を使用して、表示されているとおりに変換します。 （ifテストで結果を使用するかどうかを心配する必要はありませんが、イベントハンドラーからの戻り値は実際のブール値である必要があります。）

PS：4つの関数すべてが呼び出されても、必要な全体的なtrueまたはfalseの結果が生成されることを示す、かなり不格好なデモを次に示します。 http://jsfiddle.net/nnnnnn/svM4h/1/

20
nnnnnn

ORではなくANDを使用するようにコードを変更する

onsubmit = "return validateName（）&& validatePhone（）&& validateAddress（）&& validateEmail（）"

その理由は、ORを一度使用すると、最初の関数がtrueを返すと、他の関数をチェックする手間がかからなくなるためです。また、最初のチェックがfalseで、2番目がtrueの場合、少なくとも1つのチェックがTRUEであるため、フォームは引き続き送信されるため、ORを使用したくありません。

この動作を確認するには、 fiddle を参照してください。チェックが実行され、アラートメッセージが表示されますが、check2がfalseを返すため、フォームは送信されません。checks1関数とcheck2関数の戻り結果と&&および||の使用

問題をよりよく理解した後、単一の＆を使用する必要がありますが、true & trueはtrueではなく1を返すため、次のように記述する必要があります

onsubmit = "return（（validateName（）＆validatePhone（）＆validateAddress（）＆validateEmail（））== 1）"

7
Chris Moutray

続行する前にすべての関数がtrueを返すことを確認する必要がある場合は、&&ではなく||を使用し、戻り関数によって式が成熟前に評価されないようにするには、余分な角かっこを追加します

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">
3
Ahmad

各関数を呼び出し、その戻り値をチェックするラッパー関数を作成します。戻り値がfalseの場合はいつでも、その時点でfalseを返すことによってフォーム送信を停止するか、残りの事柄を評価して最後にfalseを返すことができます。

だからJSはあなたが望むことをするコードです：

function validateForm() {
    var isFormValid = true;
    isFormValid &= validateName();
    isFormValid &= validatePhone();
    isFormValid &= validateAddress();
    isFormValid &= validateEmail();
    return isFormValid? true:false;
}

フォームで今単に使用してください：

<form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return validateForm();">

動作するJSFiddleの例を示します

編集：以下のブーブーを作り、修正しました。

ORの使用は正しくありませんでしたが、ANDが期待どおりに機能しないのは Short-circuit_evaluation が原因です。

  • OR：trueである最初のオペランドで評価が停止し、trueが返される
  • AND：falseである最初のオペランドで評価が停止し、falseが返される
    • 2
    Akshet

    onsubmit = "return validateName（）&& validatePhone（）&& validateAddress（）&& validateEmail（）"

    このコードを使用

    0
    Akram Ali

    フォームを検証するには、validateForm（）{}という関数を作成し、この関数内に完全な検証に必要なすべてのコードを配置しました。次に、onsubmit = "validateForm（）"を使用します。順番に確認し、すべての条件が真の場合にのみ送信します。

    0
    Conor

    以下のメソッドは最初にvalidateName（）関数をチェックし、最初の関数のみがtrueの場合は次の関数をチェックするように処理し、3番目の関数を起動するには最初と2番目の関数のtrueを返す必要があります。したがって、すべての関数が無効で、異なるエラーメッセージが表示されている場合でも、最初の関数のエラーメッセージのみが表示されることを想像してください。 validateName（）関数が渡されると、validatePhone（）ectのエラーメッセージが表示される場合があります。

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">

    最初の送信時にすべての検証に従ってエラーメッセージを表示する場合は上記を使用できません。送信時にすべての関数を起動する（またはすべての検証エラーを表示する）場合は、次のメソッドを使用できます。

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit=" if( ( validateName() && validatePhone() && validateAddress() &&
validateEmail() ) == false) { return false; } ">
    0
    Prasad Gayan