0

これらの2つの機能を組み合わせて、両方が機能するようにするにはどうすればよいですか？現在、検証できるのは1つだけで、もう1つは取得できません。

JavaScriptのサンプル：

function validateForm() {

var x=document.forms["giftCert"]["gift_name"].value;

if (x==null || x=="") {

errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

return false;
  }
}

function validateForm() {

var x=document.forms["giftCert"]["gift_email"].value;

if (x==null || x=="") {

errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

return false;
  }
}

フォームHTMLの短いバージョン：

<form action="http://ww6.aitsafe.com/cf/voucher.cfm" method="post" name="giftCert" onsubmit="return validateForm()"  />
    *Name:<input type="text" name="gift_name">
    <div id="emptyName" class="error"></div>

    *Email: <input type="text" name="gift_email">
    <div id="emptyEmail" class="error"></div>

    <input class="button" type="submit" value="Add to Cart" />

</form>
4

6 に答える 6

1

同じ関数にコードを入れることができます。

function validateForm() {
    return ["Name", "Email"].every(function(type) {
        var lower_type = type.toLowerCase(),
            x=document.forms["giftCert"]["gift_" + lower_type].value;

        if (x==null || x=="")
            $("div#empty" + type).show().html("The recpient's " + lower_type + " is required.");
        else
            return true;
    });
}

コードの多くはほぼ同じであるため、"Name"との"Email"値を配列に入れ、配列をループして同じコードを呼び出し、必要に応じて適切な値をドロップすることができます。

これは、を使用しArray.prototype.everyて、配列の各値が検証に合格したかどうかを示します。

いずれかの項目が検証に失敗した場合、それはを返しundefined、ループは停止してをvalidateForm返しますfalse。

検証に合格したすべてのアイテムはを返しますtrue。すべてのアイテムが検証に合格すると、.everyが返さtrueれ、フォームが続行されます。

すべての検証が実行されていることを確認したい場合は、を使用して失敗時に.filter()戻ることができますtrue。これにより、結果の配列に項目が追加されます。障害がなかった場合、アレイは空になります。

.length次に、配列のをテストし、との比較を返し0ます。

function validateForm() {
    return ["Name", "Email"].filter(function(type) {
        var lower_type = type.toLowerCase(),
            x=document.forms["giftCert"]["gift_" + lower_type].value;

        if (x==null || x=="") {
            $("div#empty" + type).show().html("The recpient's " + lower_type + " is required.");
            return true;
        }
    }).length === 0; // will be true if no validation failures
}
于 2012-09-12T01:46:10.260 に答える
0

完了したら、2番目のものを呼び出します。

または、両方を呼び出す3番目の関数を作成し、それをonsubmitに含めます。その関数は両方の関数の戻り値を確認し、両方がtrueを返す場合にのみtrueを返します。

または、とにかく似ているので、2番目のコードを最初のコードの中に入れてください。重複したコードの一部を取り除くこともできます。

于 2012-09-12T00:59:36.223 に答える
0

同じ関数名を再利用すると、後続の各関数宣言は先行するエントリを上書きします。検証を別々の関数に保持するのが最も簡単な場合があるため、それらに適切な名前を付け、それらすべてを呼び出すドライバー関数を作成する必要があります。例：

function validateForm() {
  return validateName && validateEmail();
}

function validateName() {

  var x=document.forms["giftCert"]["gift_name"].value;

  if (x==null || x=="") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
  }

  return true;
}

function validateEmail() {

  var x=document.forms["giftCert"]["gift_email"].value;

  if (x==null || x=="") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

    return false;
  }

  return true;
}

さらに、2つを組み合わせることができますが、これはそれほど柔軟ではありません。

function validateForm() {

  var name =document.forms["giftCert"]["gift_name"].value;

  if (name == null || name == "") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
  }

  var email = document.forms["giftCert"]["gift_email"].value;

  if (email == null || email == "") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

    return false;
  }

  return true;
}
于 2012-09-12T01:00:17.310 に答える
0

簡単な答えはこれを行うだけです

function validateForm() {

var x=document.forms["giftCert"]["gift_name"].value;

if (x==null || x=="") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
}
x=document.forms["giftCert"]["gift_email"].value;

if (x==null || x=="") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

   return false;
  }
}

より長い答えは、関数に一意の名前を付ける必要があるということです。また、コードの一部でjqueryを使用して、フォームにアクセスするために使用してみませんか？また、通常、HTMLから関数を呼び出すことは悪い習慣と見なされていました。

于 2012-09-12T01:01:48.843 に答える
0

考えられる解決策の1つ：

function validateForm() {

    var x=document.forms["giftCert"]["gift_name"].value,
        y = document.forms["giftCert"]["gift_email"].value,
        error = false;

    if ( !x ) {
        errMsg = "The recpient's name is required.";              
        $("div#emptyName").html(errMsg).show();
        error = true;
    }

    if ( !y ) {
        errMsg2 = "The recpient's email address is required.";              
        $("div#emptyEmail").html(errMsg2).show();
        error = true;
    }

    if (error === true) return false;

}​
于 2012-09-12T01:02:47.250 に答える
0

2つの関数を1つに組み合わせる方法を知りたい人のために、これを行うために私が作成した関数を次に示します。

function combineFunctions() {
    var args = Array.prototype.slice.call(arguments, 0);
    return function() {
            for (var i = 0, len = args.length; i < len; i++) {
                if (typeof args[i] === "function") {
                    args[i].apply(this, arguments);
                }
            }
    };
}

次に、関数に結合するには：

var myFunc = function() { console.log('1'); };
var myOtherFunc = function() { console.log('2'); };

var myCombinedFunc = combineFunctions(myFunc, myOtherFunc);
myCombinedFunc(); // outputs 1, then 2 to the console

注：これは、同じ引数を持つ関数でのみ機能します-イベントハンドラーに関数を追加する場合に最適です

于 2013-09-27T18:40:12.597 に答える