java - जेएसआर 303 बीन सत्यापन+जावास्क्रिप्ट क्लाइंट-साइड सत्यापन




javascript spring (4)

सर्वर पक्ष पर JSR 303 बीन सत्यापन का उपयोग करते समय जावास्क्रिप्ट (न्यूनतम कोड डुप्लिकेशन के साथ) का उपयोग कर क्लाइंट-साइड फॉर्म सत्यापन करने का सबसे अच्छा तरीका क्या है? मैं वर्तमान में स्प्रिंग 3 और हाइबरनेट वैलिडेटर का उपयोग कर रहा हूं।



प्राइमफेस क्लाइंट साइड वैलिडेशन फ्रेमवर्क बीन सत्यापन का समर्थन करता है।

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


मैं सुझाव दूंगा कि आप स्प्रिंग जेएस देखेंगे, जो डोजो पर भारी निर्भर करता है। एक ट्यूटोरियल here पाया जा सकता here

अपने आप के साथ खेलना शुरू करने का सबसे आसान तरीका स्प्रिंग रू डाउनलोड करना है, उदाहरण के स्क्रिप्ट्स में से एक के साथ पेटक्लिनिक नमूना अनुप्रयोग बनाएं (इसमें आपको 5 मिनट लगते हैं) और फिर जावास्क्रिप्ट को एकीकृत करने के तरीके के साथ खेलें। स्प्रिंग रू एक ही तकनीक स्टैक के साथ एक ऐप बनाता है जिसका उपयोग आप करते हैं (स्प्रिंग + हाइबरनेट + जेएसआर 303 का कार्यान्वयन)


यहां बताया गया है कि मैं स्प्रिंग एमवीसी + JQuery + Bootstrap का उपयोग करके इसे कैसे कर रहा हूं, आंशिक रूप से स्प्रिंगसोर्स में हाल के ब्लॉग पोस्ट पर आधारित है :

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 को फॉर्म डेटा के साथ प्राप्त करेगा और परिणाम के आधार पर पृष्ठ अपडेट करेगा।







bean-validation