asked on

Form Validator

I am attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				</div>
			</div>
		</table>
	</div>
	<div class="modal-footer">
	    <button type="button" class="btn btn-secondary" ng-click="addEmployee()" data-dismiss="modal">Add</button>
        <button type="button" class="btn btn-secondary" ng-click="closeEmployee()" data-dismiss="modal">Close</button>
    </div>
</div>

Open in new window

The portion of the code I attempted to apply the validation is

<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
<div class="help-block with-errors"></div>

Open in new window

Did I miss something? Your help is kindly appreciated.

Thank You.

Leonidas Dosas

I post all the code containing script and links.The first issue that I saw in your code is that you didn't warp the form in a form element.Second I add a data-error attr and a

<div class="help-block with-errors"></div>

Open in new window

element in each div contains input text.

<!DOCTYPE html>

<html>
    <head>
        <title>Form Validator Expert</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
        
    </head>
    <body>
        <form role="form" data-toggle="validator">
        <div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-minlength="5" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" data-minlength="5" data-error="Please enter name field." ng-model="employee.age">
                                        <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-minlength="5" data-error="Please enter name field." id="company" ng-model="employee.company">
                                        <div class="help-block with-errors"></div>
				</div>
			</div>
		</table>
	</div>
	<div class="modal-footer">
	    <button type="button" class="btn btn-secondary" ng-click="addEmployee()" data-dismiss="modal">Add</button>
        <button type="button" class="btn btn-secondary" ng-click="closeEmployee()" data-dismiss="modal">Close</button>
    </div>
</div>
        </form>        
        <input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
        <div class="help-block with-errors"></div>
    </body>
</html>

Open in new window

eugene007

ASKER

I tried but it doesn't work.

Leonidas Dosas

It works for me. DId you copy all the code as I show? Did you have the css and the libraries as I show();

eugene007

ASKER

I attempted too but failed. Could it be a browser issue.

Leonidas Dosas

eugene007

ASKER

I am opening the modal using the following angularjs code:

	$scope.addEmployee = function(){
		 
		//empScope = $scope;
		
		$uibModal.open({
			animation: false,
			templateUrl: '../assets/templates/modal/employee/addEmployee.php',
			controller: 'AddEmployeeController',
			size: '',
			backdrop: 'static'
		}).result.catch(function(res) {       
			  if (!(res === 'cancel' || res === 'escape key press')) {
				throw res;
			  }
		});
	}

Open in new window

my addEmployee.php code are as below:

<form role="form" data-toggle="validator">
<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-minlength="5" data-error="Please enter name field." id="name" ng-model="employee.name" required/>
					<div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				</div>
			</div>
		</table>
	</div>
	</form>
	<div class="modal-footer">
	    <button type="button" class="btn btn-secondary" ng-click="addEmployee()" data-dismiss="modal">Add</button>
        <button type="button" class="btn btn-secondary" ng-click="closeEmployee()" data-dismiss="modal">Close</button>
    </div>
</div>
</form>

Open in new window

Also I created a single page app with angularjs. Therefore my libraries are imported in the following manner:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">  
    <head>
		<title>MyStore</title>
	
        <meta charset="UTF8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="assets/css/main.css" rel="stylesheet" type="text/css">
		<link href="assets/css/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="assets/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Add the usual things here -->
    </head>
    <body>
	
		<?php include 'assets/templates/theme/header.php';?>
	
	    <div id="maincontent">
            <div id="view" ui-view></div>
        </div>
		
		<?php include 'assets/templates/theme/footer.php';?>

        <script src="assets/vendor/angular/angular.min.js"></script>
        <!--<script src="assets/vendor/angular-route/angular-route.min.js"></script> -->
		<script src="assets/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="assets/vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
		<script src="assets/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
		<script src="assets/vendor/satellizer/dist/satellizer.js"></script>
		<script src="assets/vendor/ngSweetAlert/SweetAlert.min.js"></script>
		<script src="assets/vendor/sweetalert/dist/sweetalert.min.js"></script>
		<script src="assets/js/myApp.js"></script>
		
		<script src="assets/js/controllers/main/EmployeeController.js"></script>
		<script src="assets/js/controllers/main/AuthenticationController.js"></script>
		<script src="assets/js/controllers/main/UserController.js"></script>
		
		<script src="assets/js/controllers/modal/employee/AddEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/ViewEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/UpdateEmployeeController.js"></script>
		
		<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
		<script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
		
		<!-- <script src="assets/js/services/modalService.js"></script> -->
		<script src="assets/vendor/bootstrap-validator/dist/validator.min.js"></script>
		
    </body>
</html>

Open in new window

Perhaps with the given information someone could share a solution to the problem.

Leonidas Dosas

As i see in your code you are inserting the modal before the scripts. The scripts must be before the

<div id="maincontent">
            <div id="view" ui-view></div>
        </div>

Open in new window

eugene007

ASKER

I tried but it doesn't work. Probably it's because bootstrap validator doesn't work well in bootstrap modal.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">  
    <head>
		<title>MyStore</title>
	
        <meta charset="UTF8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="assets/css/main.css" rel="stylesheet" type="text/css">
		<link href="assets/css/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="assets/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Add the usual things here -->

    </head>
    <body>
	
		<?php include 'assets/templates/theme/header.php';?>

	    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
       
	    <div id="maincontent">
            <div id="view" ui-view></div>
        </div>
		
		<?php include 'assets/templates/theme/footer.php';?>

        <script src="assets/vendor/angular/angular.min.js"></script>
        <!--<script src="assets/vendor/angular-route/angular-route.min.js"></script> -->
		<script src="assets/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="assets/vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
		<script src="assets/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
		<script src="assets/vendor/satellizer/dist/satellizer.js"></script>
		<script src="assets/vendor/ngSweetAlert/SweetAlert.min.js"></script>
		<script src="assets/vendor/sweetalert/dist/sweetalert.min.js"></script>
		<script src="assets/js/myApp.js"></script>
		
		<script src="assets/js/controllers/main/EmployeeController.js"></script>
		<script src="assets/js/controllers/main/AuthenticationController.js"></script>
		<script src="assets/js/controllers/main/UserController.js"></script>
		
		<script src="assets/js/controllers/modal/employee/AddEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/ViewEmployeeController.js"></script>
		<script src="assets/js/controllers/modal/employee/UpdateEmployeeController.js"></script>
		
		<!--
		<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
		<script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
		-->
		<!-- <script src="assets/js/services/modalService.js"></script> -->
		<!--
		<script src="assets/vendor/bootstrap-validator/dist/validator.min.js"></script>
		-->
    </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

eugene007

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

eugene007

ASKER

As provided.