Blazor validation not support individual field validation, its only validate all fields at a time in context. if i load my page at once in separated tab or stepper, validate controls partially not all fields. Is it possible? Please give me the solution. But i achieved in jquery by $('#ShippingInfo').validate().element('#ShippingAddress_StateID');
But blazor validate all the fields when press the submit button.
eg.,
I have a module like wizard using stepper component(it may be 4 steps). Here First step having some set of controls like customer details and 2nd step having some set of controls like get contact details and so on. All the controls are corresponding to one model class with annotations but validation by step by step by Next button using stepper component. How do i achieve this?
Option 1
Divide your view model into several submodels "MySubmodel1", "MySubmodel2", etc.
Then in your wizard-like form, have multiple <EditForm> elements, each specifying the corresponding submodel, ie. in the first <EditForm> set Model=#MySubmodel1, in the second <EditForm> set Model=#MySubmodel2, etc.
Option 2
This option is based on conditional validation of your view model. You will use just 1 viewmodel for the complete wizard-like form. Add a property "StepNumber" to your view model that will identify current step (step 1, step 2, ...), and define conditional validation of corresponding fields based on the actual step.
This can be achieved eg.
by using the custom Validation attributes like "RequiredIf" discussed eg. here on StackOverflow
or
by implementing the IValidatableObject (discussed eg. here) - in the Validate() method, write a code that will yield return ValidationResult for view model fields that do not have actual state as required by current step.
Finally, in your form, adjust current step when handling your Previous/Next step buttons.
Related
I am currently working on a project in MVC 3 where I am leveraging Entity Framework to persist one data model over two Views which each contain one HTML Form (similar to wizard-based design).
Yet after the user fills out the appropriate fields on the first View and submits the form, client-side validation for the entire model is triggered, and validation errors are shown for fields that will not even be available for input until the second View instantiates.
I have currently implemented a workaround where I simply turn off client-side validation for the first View entirely, but I am certainly not keen on the idea of populating my model with data that has not been validated at all. This is bad. M'kay.
Is there any way to partially validate the fields on the first View and not trigger valdiation for the whole data model?
That's where ViewModels comes. Instead of directly binding the domain model with the views, you should create view models over them and bind to the views.
If you are not required to put validation on the EF models directly then you can use the MetadataType to do partial validation as needed. Take a look at my long example here on stackoverflow.
Thanks for the input all. However, I was able to obtain a solution in a very simple way. By placing the following code in the HttpPost element of the first View...
if (ModelState.IsValidField("FirstField") && ModelState.IsValidField("SecondField"))
return RedirectToAction ("NameOfAction", model);
else
return View();
...I was able to achieve partial field validation. However, this field-specific approach will ONLY work provided the Submit button on the first View has class "cancel" and the additional validation errors that are generated (for the fields that are NOT present on the first View) are manually cleared before the above if statement. To do this, use:
ModelState["FieldName"].Errors.Clear();
No major change in architecure. No partial Views. No handing off unvalidated Data.
Works very well...
NOTE: If the second View loads with validation errors, use:
ModelState.Clear();
in the Action where the second View is initially called. This will make the second View load clean and error free, while still showing the validation errors later upon final form submission.
I have a form that will load some fields when the page is requested and some other fields that will be loaded as the user choses one option in a dropdown. The fields that should be loaded upon selection are EditorTemplates. Is there a way I could make it work without the need to refresh the page (i.e a partial view requested via ajax) and keeping the "binding" to my viewmodel?
Yes, this is possible as long as you respect the naming conventions of your input fields so that the default model binder can understand them. Here's an example of those conventions for lists. And here's a great article illustrating how you could implement editing a variable length list.
I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://
I have a view which is containing 5 forms submitting separately but to the same model. The aim of this is allow the user to fill all the forms in the same page and be able to quickly compare the values he puts in for each form. Each form has most of the fields in common with another one. If you want a idea of the stuff, imagine that you are a soccer trainer and you want to be able on the same page to set up your team tactics for each half time. So I'll have a HalfTime model with two forms on the same page, one for each half time
So when I submit Halftime 1 form and that the validation fails, the validation errors of HalfTime1 is displayed in HalfTime2 fields too. I would like to be able to disable the validation of one form according if it wasn't submited.
My idea was to send a variable from the controller to the view containing the name/id of the current half time and from this variable, displaying validation errors only in the ccorrect form.
Do you have any idea on how I can disable the display of the validation errors in one field?
Thank you a lot!
Set the error option to false when you use form input. ie:
echo $this->input('Halftime2.title', array('error' => false));
I have a basic model :
class MyModel(models.Model):
my_field = models.CharField()
I have a basic form for this model :
class MyFrom(forms.ModelForm):
class Meta:
model = MyModel
And I have a function that does a basic lookup (a lot more complex in reality, regex etc. won't do) :
POSSIBLE_VALUES = ['aa', 'bb', 'cc', 'dd']
def lookup(some_value):
if some_value in POSSIBLE_VALUES:
# the value is OK, return a string
return some_value
else:
# constructs the 'did you mean' list of suggestions
didyoumean = [pv for pv in POSSIBLE_VALUES if pv in some_value]
# returns a list which might be empty
return didyoumean
Now, the scenario that I want is:
On the site I enter a value in the "my_field" input field and hit submit button.
If the value passes the lookup I should automatically perform the form's action.
If I get multiple possible values then I should display them to the user and no other action is performed.
If I get no answers (an empty list) I should get an error message.
Some additional requirements:
I would prefer the "did you mean" list to be displayed without having to reload the page.
If a user clicks on one of the suggestions I want to perform the form's action without an additional lookup - the value has already been checked.
I want to keep all the logic outside the view and keep it in the form or in the model. This is a must.
I want to avoid hardcoded js in the template and push it into the form if possible. It's not a must.
So I assume that it would all be distributed between this fields validation and a custom widget that would handle the "did you mean" list rendering. I just can't put it all together.
Your help is required :)
EDIT. Ad. 2 in requirements.
That is a basic feature I described. In a more advanced one I want this form to have more fields and so the "did you mean" list should be displayed along with all other fields errors (if any). Then clicking on a hint would just set the my_field's value to it's value without reloading the form. A user would have to correct other errors as well so I can't go to form's action right away. Might there be just some some flag to switch between those two options ("basic" and "advanced").
I would prefer the "did you mean" list to be displayed without
having to reload the page.
Create custom widget, which renders with JS code for checking possible values as user enters it
If a user clicks on one of the suggestions I want to perform the
form's action without an additional
lookup - the value has already been
checked.
Again, that widget, when clicked, should just submit the form.
I want to keep all the logic outside the view and keep it in the
form or in the model. This is a must.
On the form you'll have clean() method to validate everything. If, say, some bogus data passes with submit from p. 2 - you still raise validation error.
I want to avoid hardcoded js in the template and push it into the form if
possible. It's not a must.
Solved with custom widget, details.