Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David Hochuli 8 posts 99 karma points
    Apr 30, 2019 @ 15:22
    David Hochuli
    0

    Html.BeginUmbracoForm Validate Form Problem

    Templates, (partial) views and macros
    Umbraco 8

    How can i validate this form before submitting?

    @using (Html.BeginUmbracoForm("SubmitForm", "ContactSurface", FormMethod.Post))
{
@Html.AntiForgeryToken()

<div class="row row-14 gutters-14">
    <div class="col-md-4">
        <div class="form-wrap">
            <input class="form-input" id="Name" name="Name" type="text" data-constraints='@@Required(message="@Umbraco.GetDictionaryValue("RequiredField")")' />
            <label class="form-label" for="Name">@Umbraco.GetDictionaryValue("ContactFormName")</label>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-wrap">
            <input class="form-input" id="Email" name="Email" type="text" data-constraints='@@Email(message="@Umbraco.GetDictionaryValue("RequiredEMail")") @@Required(message="@Umbraco.GetDictionaryValue("RequiredField")")' />
            <label class="form-label" for="Email">@Umbraco.GetDictionaryValue("ContactFormMail")</label>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-wrap">
            <input class="form-input" id="Phone" type="text" name="Phone" data-constraints='@@Numeric(message="@Umbraco.GetDictionaryValue("RequiredNumeric")") @@Required(message="@Umbraco.GetDictionaryValue("RequiredField")")'>
            <label class="form-label" for="Phone">@Umbraco.GetDictionaryValue("ContactFormPhone")</label>
        </div>
    </div>
    <div class="col-12">
        <div class="form-wrap">
            <textarea class="form-input textarea-lg" id="Message" name="Message" data-constraints='@@Required(message="@Umbraco.GetDictionaryValue("RequiredField")")'></textarea>
            <label class="form-label" for="Message">@Umbraco.GetDictionaryValue("ContactFormMessage")</label>
        </div>
    </div>
</div>
<label class="checkbox-inline">
    <input name="input-checkbox-1" value="checkbox-1" type="checkbox" id="checkbox" onclick="checkCheckbox()">@Umbraco.GetDictionaryValue("ContactFormPrivacyPolicy") @Umbraco.GetDictionaryValue("ContactFormMoreInformations"):
    <a href="@Umbraco.Content(1339).Url">@Umbraco.Content(1339).Name</a>
</label>

<button class="button button-default-outline-2 button-ujarak" id="submitButton" disabled="disabled" style="pointer-events:none" type="submit">@Umbraco.GetDictionaryValue("ContactFormSubmitButton")</button>



<script>
    function checkCheckbox() {
        var checkBox = document.getElementById("checkbox");
        var submitButton = document.getElementById("submitButton");
        if (checkBox.checked == true) {
            submitButton.removeAttribute('disabled');
            submitButton.style.pointerEvents = "all";
        } else {
            submitButton.setAttribute('disabled', 'disabled');
            submitButton.style.pointerEvents = "none";
        }
    }
</script>


}

    Sould do the same like this:

    <form class="rd-mailform">
    ...
</form>

    enter image description here

    Copy Link
  • Corné Strijkert 80 posts 456 karma points c-trib
    Apr 30, 2019 @ 18:37
    Corné Strijkert
    0

    Submitting forms to a Surface controller is very similar to submitting forms in MVC without Umbraco.

    I think you need the use of jQuery unobtrusive validation library.

    https://exceptionnotfound.net/asp-net-mvc-demystified-unobtrusive-validation/

    When you make use of that library you can add validation attributes to you C# form model. These validation rules are 'transformed' to client side validation rules.

    Copy Link
  • David Hochuli 8 posts 99 karma points
    May 01, 2019 @ 05:42
    David Hochuli
    0

    In this article they start with a BundleConfig.cs in the folder App_Start

    Where do I put this code, if I don't have a folder App_Start?

    Copy Link
  • Corné Strijkert 80 posts 456 karma points c-trib
    May 01, 2019 @ 05:48
    Corné Strijkert
    100

    It's not required to make use of the BundleConfig, it's just a mvc way to 'bundle' your scripts and stylesheets.

    You can either use the Bundle or insert the scripts directly in you master view or something similiar.

    The trick is mainly:

    • Adding validation attributes to your model
    • Make use of the Html helper to render your form view
    • Adding the unobtrusive validation library scripts

    When you google on 'mvc unobtrusive' you will get a lot of examples that will you teach how to enable client side validation.

    In case you have validation rules that are not covered by the model annotation attributes, you can add your custom validation rules as well. It's a little bit complex to start with, but you have to know that it is possible :)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft