Skip to content

Instantly share code, notes, and snippets.

@Shawful
Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shawful/8522b37fc3b140ad3eca to your computer and use it in GitHub Desktop.
Save Shawful/8522b37fc3b140ad3eca to your computer and use it in GitHub Desktop.
HTML attempting validation in a modal with angular-wizard
<!-- Modal -->
<div class="modal fade" id="register" role="dialog" ng-controller="regCtrl">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <h4>Registration</h4> -->
<br>
<br>
</div>
<wizard on-finish="finishedWizard()">
<wz-step title="General Info">
<!-- <h1>This is the first step</h1> -->
<!-- <p>Here you can use whatever you want. You can use other directives, binding, etc.</p> -->
<!-- <input type="submit" wz-next value="Continue" /> -->
<div class="modal-body">
<div class="form-group">
<form name="registration">
<!-- class="form-horizontal" role="form" -->
<br>
<!-- <ng-form name="generalInfo"> -->
<div class="form_group">
<div class="row">
<label for="contact-name" class="col-lg-2 control-label">First Name:</label>
<div class="col-lg-4">
<input type="text" name="firstName"class="form-control" id="contact-name" placeholder="Jane/John" ng-model="firstName">
</div>
<label for="contact-name" class="col-lg-2 control-label">Last Name:</label>
<div class="col-lg-4">
<input type="text" name="lastName" class="form-control" id="contact-name" placeholder="Doe" ng-model="lastName">
</div>
</div>
</div>
<div class="form=group">
<div class="row">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" name="email" class="form-control" id="contact-email" required placeholder="you@gmail.com" ng-mode="userName" ng-minLength=3>
</div>
</div>
</div>
<br>
<div class="form=group">
<div class="row">
<label for="contact-email" class="col-lg-2 control-label">Age:</label>
<div class="col-lg-4">
<!-- Single button -->
<input type="number" class="form-control" min="18" max="115" id="contact-age" required placeholder="18" ng-model="userAge">
</div>
</div>
</div>
</div>
<!-- <div class="btn-group"> -->
<!-- <div class="modal-footer"> -->
<ul class="pager">
<li>
<small class="error" ng-show="true">
Email and Age are required
</small>
<br><br>
<a>
<input class="btn btn-primary navbar-btn" type="submit" id="contactInfo" ng-click="validateContact()" value="next" wz-next></input>
</a>
</li>
</ul>
<!-- </ng-form> -->
</form>
<!-- </div> -->
<!-- </form> -->
<!-- </div> -->
<!-- <div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div> -->
</div>
</wz-step>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment