Displaying server-side form validation errors

Topic: Displaying server-side form validation errors

ddellav pro asked 6 years ago

I bought MDB pro but I'm not able to figure out how to return server side error messages to clients on form submit. Using the bootstrap "has-error" on text inputs does nothing. I found your implementation for client-side html5 validation based on input type using the data-error and data-success attributes on the label but I'm not sure how to work this into an effective server-side notification without a tremendous amount of javascript required. There's gotta be a way right?

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello there everyone, The material design-ish nature of our inputs often requires hiding (as in display: none !important;) the original html elements. This solution has one important implication, since the HTML5-style validation requires the elements to be visible on page load to be validated. And so, for simple state-mocking there are build-in ways mentioned by @bvandewe - they actually go pretty well with basic custom functions performed on the submit event. For advanced uses, including streamlining server-side responses, some of the outer libraries scale up best. In case of jQuery, a popular pick is .validate(), which has a dedicated method for the task. With Best Regards, Kuba

Add comment

Mirosław Stasiak free answered 6 years ago

1 0 Best answer

Hi, Yes, you can do it. It's best to use an alert (toastr). Check this simple solution:

$.ajax({
  url        : '/url',
  method     : 'POST',
  dataType   : 'json',
  contentType: 'application/json',
  data       : JSON.stringify(data)
}).done(function(response){

  if(response.status === 1) {
    return toastr.success(response.message);
  }

  return toastr[response.status ? "warning" : "error"](response.message);

}).fail(failedAjax);

Regards,

ddellav pro commented 6 years ago

That's not what I was asking. There are any number of ways to create error notifications, toastr is but one. What I'm asking is how to style the MD Pro text input fields using server-side responses. In other words, how do I set the input to its error state and control the data-error message on page load? I expect there has got to be a built-in way of doing this.

DAME1 pro commented 6 years ago

I need the same, I'm looking for which class I need to add on the input in case of error returned from the server.

Mikołaj Smoleński staff commented 6 years ago

You need to add 'data-error' and 'data-success' attribute to the label element to show messages below the input.

bvandewe free commented 6 years ago

same question here... any luck? --edited: to get the expected state when the form loads, just add a class 'valid' or 'invalid' to the input element (along with 'validate' on the input and 'data-error or data-success' to the label...) HTH

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ddellav

Pro User 2Support score
1Questions 0Answers 0Snippets