Validation and Email not working on OctoberCMS

Question

My issue:

I'm running OctoberCMS on Azure and I'm trying to use the 'Magic Forms' plugin for October. I'm using the generic form and have it submitting successfully and is being shown on the backend.

My issue is that I want to send an email notification when a form is submitted, I have the stmp setup and the test message sends correctly but nothing happens upon submission.

My other issue is that none of the validation or JsOnSuccess is triggering.

Some of the things I've tried:

• I've set my own rules and my own rule message for the name field but nothing changed.

• I've tried hardcoding all the email details and still no email is sent, even though the test message works.

My form code:

[viewBag]
snippetCode = "formAccountingServices"
snippetName = "Form Accounting Services"

[emptyForm formAccountingServices]
group = "Accounting-Services"
rules[name] = "required"
rules[email] = "required|email"
rules[phone] = "required"
rules[service] = "required"
rules[message] = "required"
messages_success = "Your form was successfully submitted"
messages_errors = "There were errors with your submission"
mail_enabled = 1
mail_subject = "Test Subject"
mail_recipients[] = "myemail@gmail.ie"
mail_replyto = "emailFromForm@gmail.com"
reset_form = 1
redirect = "https://myHomeUrl.com"
inline_errors = "display"
js_on_success = "window.location.href = 'http://stackoverflow.com;'"
sanitize_data = "disabled"
anonymize_ip = "disabled"
recaptcha_theme = "light"
recaptcha_type = "image"
recaptcha_size = "normal"
==
<form data-request="{{ formAccountingServices}}::onFormSubmit">

{{ form_token() }}

<div id="{{ formAccountingServices }}_forms_flash"></div>

<div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" class="form-control">
</div>

<div class="form-group">
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" class="form-control">
</div>

<div class="form-group">
    <label for="phone">Phone:</label>
    <input type="text" id="phone" name="phone" class="form-control">
</div>

<div class="form-group">
    <label for="service">Service of interest</label>
    <select name="service" id="service" class="form-control">
      <option value="Accounting Services">Accounting Services</option>
      <option value="Legal Services">Legal Services</option>
    </select>
  </div>

<div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="8" cols="80"></textarea>
</div>

<button id="simpleContactSubmitButton" type="submit" class="btn btn-default">Submit</button>

</form>

Expect results:

• I expect that all fields are required and if some fields are empty to not allow submissions.
• upon successful submission of the form it will send a notification email to a set email address and redirect to the homepage.
• upon unsuccessful submission show error message.

Actual results:

• Form will submit every time regardless of fields being empty or not.
• No notification email is sent.
• Page is not redirected.

Answer 1

Are you using a custom theme? Magic Form explicitly uses ajax. Make sure you have jquery loaded before {% framework extras %} and I can't remember if it requires {% scripts %} or not.

A better place to seek help for this might also be the github for the plugin https://github.com/skydiver/october-plugin-forms.

Answer 2

I GOT THE SOLUTION!!

Just put the settings generated by the Magic Forms plugin like this:

[viewBag]

[genericForm contactForm]
rules[name] = "required"
rules[email] = "required|email"
rules[message] = "required"
rules[tel] = "required".... etc
==

Into the page where the partial is injected like this {% partial 'sections/contact' %} Then you will avaible to inject the component "contactForm" (in my case, of course) into the partial 'sections/contact' like this {% component "contactForm" %}

REMEMBER to include {% framework extras %} into the layout before jQuery scrtipt to enable the ajax handler.

That's it!