0

Problems

I am working in MVC C# and I have two scenarios where smartwizard fails validation. Hoping I can get some help.

Scenario

<div id="step-1">
    <h2><i class="fa fa-address-card-o"></i><u>Information</u></h2>
    <div id="form-step-0" role="form" data-toggle="validator">
    <div class="form-group">
      <input type="text" class="form-control" name="name" id="email" placeholder="Write your name" required>
      <div class="help-block with-errors"></div>
    </div>
</div>

1) Now the code above works and validates fine, however If I am intending to format my form and I add ( the code below) to make two rows. The form will validate and move on to the next step even if the field marked as required is empty.

<div id="form-step-0" role="form" data-toggle="validator">
    <div class="row">
        <div class="col-lg-6">

2) If I remove the row and col so that it works, but I replace the input type to be this

 <div class="col-lg-10">
   @Html.LabelFor(model => model.middleName, new { @class = "control-label" })
   <div class="col-lg-10">
     @Html.EditorFor(model => model.middleName, new { htmlAttributes = new { @class = "form-control required" } })
     <div class="help-block with-errors"></div>
   </div>
 </div>

the validation will again not work, I suspect this might be because the "required" is being assigned wrongly but I do not know the correct way.

Any assistance to guide me in accomplishing these validations would be appreciated.

Regards

Joe Wilson
  • 5,591
  • 2
  • 27
  • 38
unknown techh
  • 29
  • 6
  • For issue #1, are you saying the validation doesn't work when inside Bootstrap rows and columns? That should not break validation, unless maybe those rows and columns have *new* input elements added after the form was loaded and parsed for validation? – Joe Wilson Mar 17 '18 at 23:21
  • @JoeWilson I don't see that, there's nothing new, the fields show up as "red" indicating validation failed for a split second then it goes to step 2 – unknown techh Mar 17 '18 at 23:41

1 Answers1

0

You have a combination of form validation and wizard step validation issues.

For issue #1, Smart Wizard doesn't validate each step. That is something you have to code yourself. Even once you have correct HTML syntax and see validation errors, the wizard let's the user go to the next step unless you implement the onLeaveStep callback.

For issue #2, you have:

@Html.EditorFor(model => model.middleName, new { htmlAttributes = new { @class = "form-control required" } })

but required is not a CSS class, it is an input attribute. Change your Razor syntax to reflect that.

@Html.EditorFor(model => model.middleName, new { htmlAttributes = new { @class = "form-control", required = "required" } })
Joe Wilson
  • 5,591
  • 2
  • 27
  • 38