I have form in plugin Component:

<form role="form"  id="dl_contact_form_widget"

  data-request="{{ __SELF__ }}::onSubmit"

  data-request-success="alert('Your message has been received!')"

  data-request-loading="#dl-contact-form-widget-btn"

    >

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <input name="name" id="name" type="text" class="form-control" placeholder="Enter Name">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <input name="email" id="email" type="text" class="form-control" placeholder="Enter Email">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <input name="phone" id="phone" type="text" class="form-control" placeholder="Phone Number">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <input name="subject" id="subject" type="text" class="form-control" placeholder="Enter Subject">
        </div>
    </div>
</div>
<div class="form-group">
    <textarea name="message" id="message" class="form-control" id="comments" rows="8" placeholder="Enter Message"></textarea>
</div>

<div class="form-group">
    <button id="submit" type="submit" class="btn btn-info">
        <span style="float:left">Send</span>
        <i id="dl-contact-form-widget-btn" class="fa fa-cog fa-spin" style="display: none; float:left; margin-left: 10px; margin-top: 4px;"></i>
    </button>
    <button id="reset" type="reset" class="btn btn-default">Reset</button>
</div>

</form>

Validation works correctly, however I have pops ups, how do I make errors show under fields inside the form without writing javascripts

The only way to do this without writing javascript is to use HTML5 validation and special input types. Otherwise, you'll need to add some javascript to tell your page what to do. The front end of October is entirely detached form the backend, you won't be able to access things like the backend modals or popups. One script I have used for validation messages that I liked is called Toastr

@Scott thanks. Was helpful

@Scott I created a generic script which I can reuse. Thanks for the head up

;function DigitlimitForm(form_selector, form_handler, buttonProcessMessage, complete)
{

var form = jQuery(form_selector),
    submitBtn = form.find('button[type="submit"]'),
    submitBtnText = submitBtn.find('span'),
    submitBtnInitText = submitBtn.find('span').html(),
    submitBtnLoader = submitBtn.find('i');

if(buttonProcessMessage == undefined){
    buttonProcessMessage = 'Please Wait...';
}

submitBtn.click(function (e) {

    e.preventDefault();

    if(submitBtnInitText != buttonProcessMessage){

        jQuery(this).closest("form").request(form_handler, {
            success: function (data) {
                //do cool stuffs
            },
            error: function ($el, context, textStatus, jqXHR) {

                var errors = jQuery.parseJSON($el.responseText),
                    validation_errors;

                if('X_OCTOBER_ERROR_FIELDS' in errors){

                    toastr.error('Opps! Please correct form errors');

                    validation_errors = errors.X_OCTOBER_ERROR_FIELDS;

                    jQuery.each(validation_errors, function( field_id, field_error ) {
                        var field       = form.find('#'+field_id),
                            form_group  = field.closest('.form-group'),
                            error_msg   = '<p id="error-'+field_id+'" class="help-block field-error" style="color:red;">'+field_error+'</p>';

                        form_group.find('#error-'+field_id).remove();

                        jQuery(error_msg).insertAfter('#'+field_id);

                    });
                }

            },
            complete: function () {
                submitBtnText.html(submitBtnInitText);
                submitBtnLoader.hide();
            },
            beforeSend: function () {
                submitBtnText.html(buttonProcessMessage);
                submitBtnLoader.show();
            }
        });
    }

})

};

inside component partial:

 <script type='text/javascript'>
    window.onload = function() {
        DigitlimitForm('#digitlimit_contact_form', '{{ __SELF__ }}::onSubmit');
    };
</script>

Last updated 8 years ago