Make a field mandatory using ng-required for fields on Custom widget portal

[DB1]

Hi All,

I have a custom widget with custom form with some fields like Name, Email etc

Requirement: I need to make the field Mandatory and should restrict the Users from form Submission if the fields are empty.

Below is the HTML code for form and fields 

<div class="modal fade" id="addexUserForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" 
data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname"><b>User Name</b></label> 
<span style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': c.addUsr.firstname+'' != ''}"></span>

<sn-record-picker id="firstname" field="c.addUsr.firstname"
table="'sys_user'"
default-query="data.existUserid"
display-field="'name'"
display-fields="'email'"
value-field="'sys_id'"
search-fields="'name,email'"
page-size="100"                 
>
</sn-record-picker>

</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" class="form-control" name="email" disabled ng-model="c.addUsr.email1">
</div>
</div>

</div>

TIA

@Ankur Bawiskar @Mark Roethof @Ravi Chandra_K @Sagar Pagar 

[BharathChintala]

@DB1 

try like below

<label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit">

[DB1]

I tried however it didn't work

[Kit Cheong]

This will need a fair bit of polishing but should get you started.

HTML Template:

<div class="modal fade" id="addexUserForm" 
     tabindex="-1" 
     role="dialog" 
     aria-labelledby="myModalLabel"
     data-backdrop="static" 
     data-keyboard="false">
  <div class="modal-dialog" 
       role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">

          <div class="col-xs-6">
            <div class="form-group">
              <label for="firstname"><b>User Name</b></label>
              <span style="padding-right: .25em" title="Mandatory" 
                    class="fa fa-asterisk mandatory"
                    ng-class="{'mandatory-filled': username.value != ''}"></span>

              <sn-record-picker id="firstname" field="username" 
                                table="'sys_user'"
                                default-query="data.existUserid" 
                                display-field="'name'" 
                                display-fields="'email'"
                                value-field="'sys_id'" 
                                search-fields="'name,email'" 
                                page-size="100">
              </sn-record-picker>

            </div>
          </div>

          <div class="col-xs-6">
            <div class="form-group">
              <label for="email"><b>Email</b></label>
              <input type="text" 
                     placeholder="Enter Email" 
                     class="form-control" 
                     name="email" 
                     disabled
                     ng-model="c.email">


            </div>
          </div>

          <input type="button" value="Submit" ng-click="c.submit()"/>

        </div>
      </div>
    </div>
  </div>
</div>

Client Script:

api.controller=function($scope, spUtil) {
	/* widget controller */
	var c = this;
	c.email = "";
	$scope.username = {displayValue:"",
										 value:"",
										 name:"username"};

	$('#addexUserForm').modal('show');

	c.submit = function() {
		console.log($scope.username.value);
		if ($scope.username.value == '') {
			alert("Input missing");
		} else {
			//Do the submit

			//action is only required if you will be doing additional different call backs
			c.server.get({"action":"submit", 
										"id":$scope.username.value}).then(function(_response){

				if (_response.data.myReturnedVal == 'Complete') {
					$('#addexUserForm').modal('hide');
					spUtil.addInfoMessage("This is now complete");
				}

			})

		}
	}


};

Server Script:

(function() {

	if (input && input.action == 'submit') {
		//Do something with user's sys_id "input.id"
		data.myReturnedVal = 'Complete';
	}

})();