0

Web アプリで PureCSS フォームを使用しようとしていますが、ページのリロードを停止している間、気の利いたフォーム検証を保持する方法がわかりません。

を使用してページのリロードを停止できることを知っていますonsubmit="return false;"

次に、AJAX を使用してフォーム データを投稿できますonClick="PostSettings();"。PostSettings() は、AJAX 要求を含む JavaScript 関数です。event.preventDefault();リロードを停止するには、その関数の先頭にも含める必要があります。

残念ながら、リロードを停止するこれらの手順は、組み込みの優れた PureCSS 検証も停止します。

ページのリロードをトリガーせずにそれを保持する方法はありますか、それとも JavaScript で独自の検証を行う必要がありますか?

参考までに、ここにhtmlがあります：

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary"
  id="save-simulation-button" onClick="PostSettings();" 
  onsubmit="return false;">
    <i     class="fa fa-save"></i> Submit Simulation Parameters
</button>
4

4 に答える 4

0

onsubmit="return MyValidFunction();" だけが必要です フォームタグにあり、「送信」ボタンには他に何もありません

フォームが正常でない場合、PureCSS は彼のメッセージで検証を行います。すべて正常な場合は、「MyValidFunction()」関数を呼び出します

function MyFunction() {
   /// your Ajax Code here
   return false;
}

<form class="pure-form" onsubmit="return PostSettings();">
  <input id="form_url" type="url" class="pure-input-1-3">
   <button type="submit" class="pure-button pure-input-1-1">OK</button>
</form>
于 2016-03-28T05:52:40.577 に答える
0

「PostSettings()」メソッド内で event.preventDefault() の代わりに「return false」を使用します。

于 2016-01-11T16:44:00.743 に答える
0

Lucas と Vignesh さん、返信ありがとうございます。

HTMLでは、ここにリターンを追加する必要がありました:onClick="return PostSettings();"

次に、javascript で、フォームが検証に合格するかどうかに応じて、または確認する必要がありますtrue。false

function PostSettings() {
    //event.preventDefault(); <<- commented out per Vigneshs suggestion

    var name = $("#simulation-name").val(); // jquery to get form values
    var description = $("#description").val();

    // Code to validate form: name and description cannot be blank
    if (name === "" || description === "") {
        console.log("name or description fields cannot be blank");
        return true; // <<- returning true allows PureCSS validation to continue
    }

    // Code passed validation so post the data...
    // POST code omitted for brevity

    return false; // <<- returning false stops the page reload
}

つまり、戻るtrueと、PureCSS フォームの検証が通常どおりに行われます (フォームが検証に合格していないため、ページのリロードはありません)。フォームが検証に合格するとfalse、ページのリロードを停止するために戻ります。これにより、PureCSS フォームの他のデフォルト イベントも停止しますが、JavaScript で検証されたかどうかを手動で確認したので問題ありません。

これが、将来これを達成したい他の人に役立つことを願っています!

于 2016-01-11T19:23:21.467 に答える