web-dev-qa-db-ja.com

JavaScriptでWebフォームを検証する方法は？

非表示フィールドの追加の計算が必要なWebフォームがあります。

drupal_add_jsを使用して、JavaScriptファイルをページに追加しました。そして、それが機能する唯一の部分としましょう...

私のcalculate.jsファイルは次のようになります：

document.getElementById("webform-client-form-80").onsubmit = function() {
  window.alert("Test!");
  document.getElementsByName("submitted[aantal18plus]")[0].value = 5;
};

なぜアラートを受け取らないのですか？そして、なぜ "submitted [aantal18plus]"の値が変更されないのですか？
「document.getElementById（ "webform-client-form-80"）。onsubmit」を「document.onload」に変更すると、すべてが機能しますになります。しかし、残念ながらまだデータはありません（windows.alert（ ""）;で試してみました）。

もう少しコンテキスト：
フォームは、BBQのサブスクリプションフォームです。私は16のフィールドセット（一度に16人用）と4つのドロップダウンメニュー（肉の選択用）を持っています。フィールドがたくさんあり、価格もさまざまです。 「全体」や「ステーキ数」などを計算したい。これらを送信電子メールで送信したいので、12個の非表示フィールドを作成しました。送信時にこれらの値を計算する必要があります。
私は（必要な）JQueryを必要としません。私が変更しているフィールドが隠されているので、送信時にうまくいきます。

簡単に言えば：onsubmit、一体どうやってそれをdrupalでJavaScriptで動作させるのですか？

7webformsformsjavascript
2
Frank Vermeulen

カスタムモジュールを作成できます。

  1. webfv.info
  2. webfv.module
  3. webfv.js

これらすべてのファイルをwebfvというフォルダに配置します。


これはwebfv.moduleファイルです。

<?php
function webfv_form_comment_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#id'] == 'webform-client-form-80') {
    $form['#attached']['js'][] = array(
    'data' => drupal_get_path('module', 'webfv') . 'webfv.js', 
    'type' => 'file',
  );
}
}


そして、これはwebfv.jsファイルです：

    (function($) {
      $(document).ready(function() {
      // Put your code here. //
      });
    }) (jQuery);


そしてもちろん、webfv.infoファイルが必要です：

name = webfv
description = JavaScript Webform Validation
core = 7.x
files[] = webfv.module

注：これはその方法の1つにすぎず、他にもいくつかの方法があります。

4
herci