フォームを送信せずにデフォルトのフォーム検証をトリガーするにはどうすればよいですか

20
stinaq 2014-03-13 04:55.

リストアイテムのNewFormをカスタマイズしていて、JavaScriptからデフォルトのフォーム検証をトリガーする必要がありますが、後でコールバックで行うため、フォームを送信したくありません。

これは可能ですか?私は、上の検索を試みたSPClientFormsオブジェクト、特にSPClientForms.ClientValidationSPClientForms.ClientFormManagerけど、私はそれをトリガーできる場合、私は見つけることができません。

5 answers

8
Vadim Gremyachev 2014-03-14 14:04.

SharePoint 2013のクライアント側の検証に関しては、少なくとも2つのオプションが利用可能です。

  • クライアント側のレンダリング(CSR)の検証
  • PreSaveAction関数を使用して保存ハンドラーをオーバーライドする

リストのEmail列にクライアント側の検証を追加する必要があるシナリオを想定しますContacts

SharePoint 2013でのクライアント側レンダリング(CSR)の検証

CSRは、SharePoint 2013のデフォルトのレンダリングモードです。SPClientForms.ClientValidation名前空間には検証APIが含まれ、共通のが含まれます。以下に、デフォルトのテキストフィールドクライアント検証をオーバーライドし、電子メールフィールドのカスタムバリデーターを追加する方法を示します。

CustomClientValidation = {};
CustomClientValidation.EmailValidator = function() {
};
CustomClientValidation.EmailValidator.prototype.Validate = function(value) {
    value = SPClientTemplates.Utility.Trim(value);

    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var hasError = !re.test(value);
    var errorMsg = hasError ? 'Invalid email address' : '';

    return new SPClientForms.ClientValidation.ValidationResult(hasError, errorMsg);
};


function EmailField_Edit(rCtx) {
    if (rCtx == null)
        return '';
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);

    if (formCtx == null || formCtx.fieldSchema == null)
        return '';

    var _value = formCtx.fieldValue != null ? formCtx.fieldValue : '';      

    if (_value.length > 0) {
        var validators = new SPClientForms.ClientValidation.ValidatorSet();
        validators.RegisterValidator(new CustomClientValidation.EmailValidator());
        formCtx.registerClientValidator(formCtx.fieldName, validators);
    }

    return SPFieldText_Edit(rCtx); //default renderer for Text field
}


(function () {
    var emailFieldCtx = {};
    emailFieldCtx.Templates = {};
    emailFieldCtx.Templates.Fields = {
        'Email': {
            'NewForm': EmailField_Edit,
            'EditForm': EmailField_Edit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(emailFieldCtx);
})();

CustomClientValidation.js

使用法:

JSLinkプロパティを使用してJavaScriptファイルの場所を指定する

PreSaveAction関数を使用して保存ハンドラーをオーバーライドする

PreSaveAction 別の手からの機能は、保存ボタンの動作をオーバーライドすることができます。

以下に、Emailフィールドに電子メール検証を追加する方法を示します。

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 


function PreSaveAction(){

    var email = $('[id ^=Email_][id $=TextField]');
    if (!validateEmail(email.val())) {
        var errorHtml = '<span class="ms-formvalidation"><span role="alert">Invalid email address<br></span></span>';
        email.after(errorHtml);
        return false;
    }
    return true;
};

使用法:

JavaScriptファイルは、コンテンツエディターWebパーツを使用して新規/編集フォームページで参照できます。

結果

新規/編集フォームページ

7
Noname 2014-03-14 02:36.

javascriptを介してフォームの検証をトリガーすることはできませんが、他のことを行うことはできます。

新しいフォームと編集の両方で形成するSaveボタンがありonclickそのトリガーPreSaveItem()と呼ばれる関数呼び出しFORMS.js内の関数であるPreSaveAction、それは関数である意味、ユーザー定義関数であるあなたが定義し、何をすべきかを決定します。特定のフォームで検証を実行するには、新規/編集フォーム内に直接配置することをお勧めします。

手動ですが、少なくともクリックイベントをボタンにバインドする必要はありません。それはすでにそこにあります、あなたがしなければならないのはロジックを供給することだけです。

更新
このメソッドを使用して正しいフィールドを取得するには、3つの引数を取る関数getTagFromIdentifierAndTitleを使用できます。タイプ( "input"、 "select"など)、FieldType( "DateTimeFieldDate"など-空白のままにすることができます)、表示名( "Title"、 "My Column"など)

例:

function PreSaveAction(){
    var col = getTagFromIdentifierAndTitle('input', '', 'Title');
    if (col == '') {
        alert(col.value + " is required!");
        return false;
    }
    return true;
};
2
ppatalong 2014-11-08 02:36.

新しい標準レンダリング(CSR)でSharePoint 2013を使用している場合は、次のメソッドを呼び出してデフォルトの検証をトリガーしますSPClientForms.ClientFormManager.SubmitClientForm('WPQ2')

WPQ2が一定かどうかはわかりません。このような接尾辞はDOMの多くの要素に追加されるため、確認するのは難しくありません。例:id="MSOZoneCell_WebPartWPQ2"

2
moonpatrol 2018-03-15 17:03.

パーティーの後半に、私はトリックを行うように見える次の解決策を見つけました

// force PostBackRequired to true in the context, otherwise it won't work if you open it into a modal
WPQ2FormCtx.PostBackRequired=true;
// we override SPClientForms.ClientFormManager.SubmitClientForm
SPClientForms.ClientFormManager.SubmitClientForm=function(b){
  var a=SPClientForms.ClientFormManager.GetClientForm(b);
  var res = (a!=null&&a.SubmitClientForm());
  // if the form is not valid, then res===true
  if (res === true) {
    return true;
  } else {
    // Do your custom things here
    // Send the form to the server
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($get(WPQ2FormCtx.SubmitButtonID).name, "", true, "", "", false, true));
  }
  // to make sure the form won't be submitted yet
  return true;
};

から https://blog.kodono.info/wordpress/2016/11/18/execute-action-before-saving-a-form-and-after-form-validation-sharepoint/

1
Petr Špaček 2015-06-19 03:37.

SPの動作は少し奇妙です。一部のフィールドの値を変更すると、SPは検証を呼び出しますが、メッセージは表示されません。問題は、SPのファイルclientforms.jsに次のようなものがあることです。

this.NotifyControlEvent = function(eventName, fldName, eventArg) { ...
  case SPClientForms.FormManagerEvents.Event_OnControlValueChanged:
    UpdateAndValidateControlValue(fldName, eventArg, false);
  ...
}

function UpdateAndValidateControlValue(fName, fVal, bDisplayError) {
  ...
  ValidateControlValue(fName, fVal, bDisplayError);
}

したがって、値が変更されている場合、関数UpdateAndValidateControlValue(fldName、eventArg、false); が呼び出されますが、検証メッセージは表示されません。

ただし、フォームが送信されているときは、この関数がtrueパラメーターで呼び出され、検証メッセージが表示されます。

この奇妙な振る舞いを変更するためにこのスクリプトを挿入することができませんでした。

ただし、ファイルシステムでclientforms.jsにアクセスできる場合は、簡単に変更できます。すべてのSPの動作を変更するには、関数NotifyControlEventでfalsetrueに変更するだけです。ただし、検証を変更するフィールドを指定できるように、入力パラメーターを使用することをお勧めします。

this.NotifyControlEvent = function(eventName, fldName, eventArg) {
  ...
  case SPClientForms.FormManagerEvents.Event_OnControlValueChanged:
      //this.customFieldSettings is custom property of  SPClientForms.ClientForm, which you have to fill
      if (this.customFieldSettings !== undefined &&
          this.customFieldSettings[fldName] != undefined && 
          this.customFieldSettings[fldName].onchangeValidation == true) 
      {
          UpdateAndValidateControlValue(fldName, eventArg, true);
      } else {
          UpdateAndValidateControlValue(fldName, eventArg, false);
      }
  return;

それが助けになり、より簡単な解決策につながることを願っています。

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

Tomorrow's Kitchen シリコンストレッチ蓋 12個パック | $14 | アマゾン | プロモーション コード 20OFFKINJALids は基本的にキッチンの靴下です。常に迷子になり、二度と閉じられない孤立したコンテナーが残ります。しかし、蓋が伸びて、残った容器、鍋、フライパン、さらには大きなスライスされた果物のすべてに適合するとしたらどうでしょうか? その非常に特殊な蓋を失うことを二度と心配する必要はありません。

あなたの最高のワシントン DC ハックを教えてください

あなたの最高のワシントン DC ハックを教えてください

このコラムでは、ロサンゼルスやラスベガスなど、いくつかの産業都市をハッキングしました。今こそ、軍産複合都市の時代です。

ある小売業者は、プラスサイズのセクションを廃止し、より大きなサイズを他のすべてのものと混ぜ合わせています

ある小売業者は、プラスサイズのセクションを廃止し、より大きなサイズを他のすべてのものと混ぜ合わせています

ある小売業者は、プラスサイズのセクションを缶詰にしています。しかし、彼らはこのカテゴリーをオンラインのみにとどめたり、完全に廃止したりしているわけではありません。

ぬいぐるみを保管する最良の方法はビーンバッグの中にあります

ぬいぐるみを保管する最良の方法はビーンバッグの中にあります

あなたがぬいぐるみとの関係が難しいのなら、私は完全に完全に理解しています. 彼らはかわいくて、感傷的な価値があり、手放すのが難しい.

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

メリック・ガーランドはアメリカに失敗しましたか?

バイデン大統領の任期の半分以上です。メリック・ガーランドは何を待っていますか?

メリック・ガーランドはアメリカに失敗しましたか?

人々にチャンスを与えることは、人生で少し遅すぎると私は信じています。寛大に。

Language