Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • lori ryan 239 posts 573 karma points
    Jun 04, 2021 @ 16:03
    lori ryan
    0

    Umbraco forms - form validation summary alternative

    Using Umbraco And Getting Started
    Umbraco 8

    I know we can put the form validation summary - is it possible to put a message if there a validation errors something like "Please ensure all fields are filled in" beside the submit button?

    Copy Link
  • Brendan Rice 538 posts 1099 karma points
    Jun 04, 2021 @ 18:22
    Brendan Rice
    0

    Hi Lori,

    what happens when you try the following code:

    @if (!Html.ViewData.ModelState.IsValid) 
{
    <div class="alert">Please ensure all fields are filled in</div>
}
    Copy Link
  • lori ryan 239 posts 573 karma points
    Jun 07, 2021 @ 11:07
    lori ryan
    0

    it just shows the message all the time becasue Html.ViewData.ModelState.IsValid is false when the form isnt filled in

    Copy Link
  • Brendan Rice 538 posts 1099 karma points
    Jun 07, 2021 @ 11:30
    Brendan Rice
    1

    Maybe something like this would work:

    var hasErrors = false;
foreach (ModelState modelState in ViewData.ModelState.Values) 
{
    if(modelState.Errors.Any())
    {
        hasErrors = true;
    }
}

    You could then use hasErrors to display the message?

    Copy Link
  • lori ryan 239 posts 573 karma points
    Jun 07, 2021 @ 12:37
    lori ryan
    0

    I think we maybe onto the wrong track Brendan when I submit the error count isnt actually counting the fields validated.

    I changed the code to the following so I could see the errors

    <table class="model-state">
    @foreach (var item in ViewContext.ViewData.ModelState) 
    {
        if (item.Value.Errors.Any())
        { 
        <tr>
            <td><b>@item.Key</b></td>
            <td>@((item.Value == null || item.Value.Value == null) ? "<null>" : item.Value.Value.RawValue)</td>
            <td>@(string.Join("; ", item.Value.Errors.Select(x => x.ErrorMessage)))</td>
        </tr>
        }
    }
</table>

    and one of the errors was includeScripts 0
    but on submission it didn't catch any of the non validated fields.

    Copy Link
  • lori ryan 239 posts 573 karma points
    Jun 08, 2021 @ 09:01
    lori ryan
    1

    ended up going with

    $('input[type*="submit"]').on("click", function () { 
   var formId = document.activeElement.id;
   var errorDiviD = "FieldWarning" + "-" + formId;
   var divErrorList =  document.getElementById(errorDiviD);
    divErrorList.classList.remove("invisible");
})

    I put a new div on form.cshtml that contained the text I want to display beside the submit button. It doesnt stop the default behaviour of the form. But will display the warning if the form doesnt go to the thank you thank page.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft