web-dev-qa-db-ja.com

JSR 303Bean検証+ Javascriptクライアント側検証

サーバー側でJSR303 Bean Validationを使用するときに、Javascriptを使用して（最小限のコード重複で）クライアント側のフォーム検証を実行するための最良の方法は何ですか？私は現在 Spring と Hibernate Validator を使用しています。

javajavascriptspringvalidationbean-validation
45
Taylor Leese

Dojoに大きく依存しているSpringJSをご覧になることをお勧めします。チュートリアルが見つかります ここ 。

自分で試してみる最も簡単な方法は、 Spring Roo をダウンロードし、サンプルスクリプトの1つを使用してpetclinicサンプルアプリケーションを作成し（これには5分かかります）、JavaScriptがどのようになっているのかを試してみることです。統合。 Spring Rooは、使用するのと同じテクノロジースタックでアプリを作成します（Spring + hibernate + jsr 303の実装）

5
Hans Westerbeek

私はこのオープンソースプロジェクトを見つけましたが、それは死んでいるように見えます、多分それは復活する価値があります。

http://kenai.com/projects/jsr303js/pages/Home

このライブラリは、SpringMVCと統合されたJSR-303およびHibernateValidatorアノテーションに基づくHTMLフォームのクライアント側検証を提供します。このライブラリは、HTMLフォームとの基本的な相互作用を処理するJavaScript検証コードベースと、Hibernate Validatorでサポートされている検証アノテーションを実装するJavaScript関数（JSR-303仕様以外のものを含む）を提供します。このJavaScriptコードベースは、提供されているtaglibを使用するか、jarからJavaScriptファイルを抽出し、タグを使用して含めることにより、ページに含めることができます。このコードベースがページに含まれると、2番目のtaglibを使用して、HTMLフォームを検証するためのJavaScriptコードが生成されます。タグの本文にJSONオブジェクトを指定して、追加の構成情報を指定することもできます。

5
ams

これが私が Spring MVC + JQuery + Bootstrap 、部分的に SpringSource の最近のブログ投稿に基づいています：

AddressController.Java

@RequestMapping(value="/validate")
public @ResponseBody ValidationResponse processForm(Model model, @Valid AddressForm addressForm, BindingResult result) {
    ValidationResponse res = new ValidationResponse();
    if (result.hasErrors()) {
        res.setStatus("FAIL");
        for (ObjectError error : result.getAllErrors()) {
            if (error instanceof FieldError) {
                FieldError fieldError = (FieldError) error;
                res.addError(fieldError.getField(), fieldError.getDefaultMessage());
            }    
        }
    }
    else {
        res.setStatus("SUCCESS");
    }
    return res;
}

AddressForm.Java

public class AddressForm {
    @NotNull
    @Size(min=1, max=50, message="Address 1 is required and cannot be longer than {max} characters")
    private String address1;

    @Size(max=50, message="Address 2 cannot be longer than {max} characters")
    private String address2;

    // etc
}

ValidationResponse.Java：

public class ValidationResponse {
    private String status;
    private Map<String,String> errors;
    // getters, setters
}

address.jsp：

<f:form commandName="addressForm">
    <div class="control-group">
        <label for="address1">Address 1</label>
        <div class="controls">
            <f:input path="address1" type="text" placeholder="Placeholder Address 1" class="wpa-valid" />
            <span class="help-inline"></span>
        </div>
    </div>
    <!-- etc -->
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn">Cancel</button>
    </div>
</f:form>

<script type="text/javascript">
function collectFormData($fields) {
    var data = {};
    for (var i = 0; i < $fields.length; i++) {
        var item = $($fields[i]);
        data[item.attr("id")] = item.val();
    }

    return data;
}

function clearErrors($fields) {
    for (var i = 0; i < $fields.length; i++) {
        var item = $($fields[i]);
        $("#"+item.attr("id")).parents(".control-group").removeClass("error");
        $("#"+item.attr("id")).siblings(".help-inline").html("");
    }
}

function markErrors(errors) {
    $.each(errors, function(key, val) {
        $("#"+key).parents(".control-group").addClass("error");
        $("#"+key).siblings(".help-inline").html(val);
    });
}

$(document).ready(function() {
    var $form = $("form.validate");
    $form.bind("submit", function(e) {
        var $fields = $form.find(".validate");

        clearErrors($fields);
        var data = collectFormData($fields);

        var validationUrl = "validate";
        $.get(validationUrl, data, function(response) {
            $("#alert").removeClass();

            if (response.status == "FAIL") {
                markErrors(response.errors);

                $("#alert").addClass("alert alert-error");
                $("#alert").html("Correct the errors below and resubmit.");
            } else {
                $("#alert").addClass("alert alert-success");
                $("#alert").html("Success!");

                $form.unbind("submit");
                $form.submit();
            }
        }, "json");

        e.preventDefault();
        return false;
    });
});
</script>

リファクタリングを使用することもできますが、これにより、フォームデータを使用してajax GETが実行され、結果に基づいてページが更新されます。

4
Mike Partridge

Richfacesはこれをサポートしています。彼らは 彼らのサイトの小さなデモ を持っています。

1
Catweazle

PrimeFacesクライアント側検証フレームワークはBean検証をサポートします。

http://blog.primefaces.org/?p=2874

0
Cagatay Civici

編集：

実際、JSR 303は、クライアント側の検証を処理するための最良の方法（IMO）です。最良のことは、フロントに適切なjsライブラリがある場合、サーバーで同じ検証（同じコード）を使用できることです（node.jsを使用する場合）。私はライブラリを作成しました @ stopsopa/validation この目的のために私は次のようなフォームを検証しています（React.jsで）：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import validator, {
  Collection,
  Required,
  Optional,
  NotBlank,
  Length,
  Email,
} from "@stopsopa/validator";

class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: {
        name: "",
        email: ""
      },
      errors: {},
      validate: false
    };
  }
  onSubmit = async e => {
    e.preventDefault();

    const errors = await validator(this.state.data, new Collection({
      name: new Required([
        new NotBlank(),
        new Length({min: 3}),
      ]),
      email: new Required([
        new NotBlank(),
        new Email(),
      ])
    }));
    this.setState({
      errors: errors.getFlat(),
      validate: true,
    });

    if ( ! errors.count()) {

      console.log('send data to server', this.state.data);
    }
  };
  onChange = (name, value) => {
    this.setState(state => ({
      ...state,
      data: { ...state.data, ...{ [name]: value } }
    }));
  };
  render() {
    const s = this.state;
    return (
      <form onSubmit={this.onSubmit}>
        <label>
          name:
          <input
            value={s.data.name}
            onChange={e => this.onChange("name", e.target.value)}
          />
        </label>
        {s.validate && s.errors.name && (
          <div className="error">{s.errors.name}</div>
        )}
        <br />
        <label>
          email:
          <input
            value={s.data.email}
            onChange={e => this.onChange("email", e.target.value)}
          />
        </label>
        {s.validate && s.errors.email && (
          <div className="error">{s.errors.email}</div>
        )}
        <br />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

ライブの例はここにあります： https://codesandbox.io/s/ymwky9603j

0
stopsopa

これは、JSR-303に代わるオープンソースです。

このソリューションは、要求メッセージのすべての検証を実行できますが、面倒なコーディングは必要ありません。

https://github.com/ckpoint/CheckPoint

Check-Pointを使用すると、Controllerメソッドのアノテーションを変更するだけで、追加のコードなしですべての検証が可能になります。

その後、すべての検証設定を管理ページで簡単に行うことができます。

このビデオはあなたの理解に役立つと思います。 https://youtu.be/I1aEIztXlhE

チェックポイント管理ページ設定画面

0
hsim