How to create a Cancel button in Bootstrap

Question

I have the following Bootstrap markup:

<!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="username">Username</label> <div class="col-md-4"> <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value=""> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-8"> <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button> <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button> </div> </div> 

When I click the Create Profile button, the form works fine, letting me know that certain fields are "Required." But when I click the Cancel button, I cannot leave the form due to incomplete required fields.

Is there a way to undo a form button in Bootstrap?

Answer 1

Change the code to the following:

 <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-8"> <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button> <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a> </div> </div>