How to write a conditional statement for this?

Question

I need your help in writing an if statement in JS. I'm still a newbie and I have no idea on how to start with the if statement. I have this code that launches a form that is inside a modal. What I wanted to do is that when the form is complete, it would launch another modal, confirming the entries that has been inputted in the form, and if the form is not complete, validations would appear, and it would not launch the confirmation modal. I used jquery.validate for the validations of the form.

Here is my code:

Form inside the modal:

<form id="formnew" class="row form-columned" role="form">

  <div class="col-md-6 m-b-10 p-t-15">
    <label for="vname">Vehicle Name:</label>
    <input type="text" autocomplete="off" class="input-focused m-b-10 m-t-10 input-sm form-control" id="vname" name="vname" placeholder="Vehicle Name">
  </div>

  <div class="col-md-6 m-b-10 p-t-15">
    <label>Category:</label>
    <select name="category" autocomplete="off" class="input-focused m-b-10 m-t-10 input-sm form-control mask-date">
      <option value="category">Category</option>
      <option>Car</option>
      <option>Bus</option>
      <option>Truck</option>
      <option>Van</option>
      <option>Motorcycle</option>
    </select>
   </div>

   <div class="pull-right m-t-20">
     <button href="#ValidateForm" data-toggle="modal" data-dismiss="modal" type="submit" class="btn btn-lg">Create</button>
     <button data-dismiss="modal" class="btn btn-lg">Cancel</button>
   </div>
</form>

Confirmation Modal:

<form class="row form-columned" role="form">
  <div class="col-md-12">
    <p>Confirm changes?</p>
  </div>

  <div class="pull-right m-t-20 m-r-5">
    <button type="submit" data-dismiss="modal" class="btn btn-lg">Okay</button>
    <button type="submit" data-dismiss="modal" class="btn btn-lg">Cancel</button>
  </div>
</form>

JS for Confirmation Modal:

function confirm() {

$("#CreateModal").click(function () {

   $('#ValidateForm').modal("show");
 });
}

Validation Rules:

$(document).ready(function () {
$("#formnew").validate({

    rules: {
        vname: "required",
        category: { valueNotEquals: "category" }
    },

    messages: {
        vname: { required: "Please provide the Vehicle Name" },
        category: { valueNotEquals: "Please select a Category" }
    },


});
});

Answer 1

I would suggest not to use another modal inside a model as it might complicate things. I ran into same situation and here what I did:

Make two section in your form:

<form>
   <div class='data'>
     <!-- data input and confirm button-->
   </div>
   <div class='confirm'>
   <!-- confirm message and submit button-->
   </div>
</form>

Initially confirm div will be hidden and when user click on confirm button do following:

1. Validate user input
2. if error, show message
3. else hide data div and show confirm div

There user can now submit form by clicking submit button. Hope it helps.. :-)