How could i make 'jQuery Validation Plugin' work with 'October Ajax Validation'

[nms]

Expected behavior

I would like to make some changes to the RainLab.User plugin and do some client-side validation before the form is submitted to the server-side.

For example: When the user submits the reset password form

1. First, use the jQuery Validation Plugin to verify that the email format is correct.

2. Second, if error do not submit, if correct do submit to the server-side.

3. Finally, use Ajax update page to enter the verification code and the new password.

Actual behavior

I have tried a lot of ways to achieve this, but the page never go to the final step : (

By the way.my english is relatively poor, so many of the statements inside the document do not understand, but fortunately i've read your video, you must know how to achieve this function. Trouble you look at the following code, incidentally help me find where the problem

Reproduce steps

1. Layout

• default-layout.htm

...
...
<script src='jquery.min.js' />
<script src='jquery.validation.min.js' />
<script>
var forgetPassword = function() {

    var handleForgetPassword = function() {

        $('.forget-form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",
            rules: {
                email: {
                    required: true,
                    email: true
                }
            },

            messages: {
                email: {
                    required: "Email is required."
                }
            },

            invalidHandler: function(event, validator) { //display error alert on form submit   

            },

            highlight: function(element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },

            success: function(label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();
            },

            errorPlacement: function(error, element) {
                error.insertAfter(element.closest('.input-icon'));
            },

            submitHandler: function(form) {
                form.submit();
            }
        });

        // With 'Enter'  Key
        $('.forget-form input').keypress(function(e) {
            if (e.which == 13) {
                if ($('.forget-form').validate().form()) {
                    $('.forget-form').submit();
                }
                return false;
            }
        });
    }
}();

jQuery(document).ready(function() {
    forgetPassword.init();
});
</script>

{% framework extras %}
{% scripts %}

...
...

2. Page

• reset-password.htm

<div class="content">
    <!-- BEGIN FORGOT PASSWORD FORM -->
    <div id="partialUserResetForm">

        {% partial 'user/resetpassword/restore' %}

    </div>
    <!-- END FORGOT PASSWORD FORM -->
</div>

3. Partial

• restore.htm

{{ form_ajax('onRestorePassword', {update:{'user/resetpassword/reset':'#partialUserResetForm'}, class: 'forget-form'  }) }}

    <input type="hidden" name="_handler" value="onRestorePassword">
    <h3>忘记密码 ?</h3>
    <p> 请输入您的邮箱来重设密码 </p>
    <div class="form-group">
        <div class="input-icon">
            <i class="fa fa-envelope"></i>
            <input 
                class="form-control placeholder-no-fix" 
                type="text" 
                autocomplete="off" 
                placeholder="Email" 
                name="email" />
        </div>
    </div>
    <div class="form-actions">
        <button type="button" id="back-btn" class="btn grey-salsa btn-outline"> 返回 </button>
        <button type="submit" class="btn green pull-right"> 提交 </button>
    </div>

{{ form_close() }}

• reset.htm

{{ form_ajax('onResetPassword', { update:{'user/resetpassword/complete': '#partialUserResetForm'}, class: 'forget-form' } ) }}

    <input type="hidden" name="_handler" value="onResetPassword">
    <h3>请检查您的电子邮件</h3>
    <div class="form-group">
        <div class="input-icon">
            <i class="fa fa-envelope"></i>
            <input 
                name="code"
                type="text" 
                class="form-control placeholder-no-fix" 
                id="resetCode" 
                autocomplete="off" 
                placeholder="Enter the activation code" 
                value="{{ resetPassword.code }}">
        </div>
    </div>
    <div class="form-group">
        <div class="input-icon">
            <i class="fa fa-lock"></i>
            <input
                id="resetPassword"
                name="password"
                type="password"
                class="form-control placeholder-no-fix"  
                autocomplete="off" 
                placeholder="Password" /> </div>
        </div>
    </div>
    <div class="form-actions">
        <button type="button" id="back-btn" class="btn grey-salsa btn-outline"> 返回 </button>
        <button type="submit" class="btn green pull-right"> 提交 </button>
    </div>

{{ form_close() }}

October build

latest

Thanks Again

[ivandoric]

Hmmm, did you check out this video? https://www.youtube.com/watch?v=72xL47jvsOs why would you use jQuery validation when October has it's own validation and it works with Ajax?

[nms]

Sorry, I did not receive your reply in time. The purpose of doing so is to reduce server pressure - -。

[ivandoric]

Yeah, well that would make sense If you would have many requests on that form. But since this is reset password form, I don't think you should worry about that, this should be no pressure on the server. Also I don't understand why you would use Ajax on password reset form, October has a system already set up for this.

[nms]

Hi, me again : )

I've seen your latest video, very helpful. thanks. but...you know, I always have some strange questions.

it seems OctoberCMS has its own AJAX Function, and it work with the form attributes some like 'dataRequest' and so on.

but if i submit the form with my own JavaScript Code , it will get error.

for example：

1. the form

<form data-request="onSave" id="badForm">
    #some inputs here need to be validation.
</form>

2. JavaScript

$(function() {
    $( '#badForm' ).submit( function () {
             //'some validation here';
             //'if going through ';
             $('#badForm').submit(); //here is the point.
    });
});

it seems the Jquery function .submit() will lost the action and method of the form. because i didn't give it's attritube 'action' or 'method'. and by the default, it will submit to itself with ' GET' method .

so ...

How should i deal with this situation.

[ivandoric]

I think you should use request method here. Did you check this documentation: https://octobercms.com/docs/ajax/javascript-api . Maybe that would help. Again I would do validation via Octobers methods, JS validation can be turned off by user, but Octobers can't.