Scenarios where smartwizard is not validating

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

Solution

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" } })