How to make fields mandatory in custom widget

[DB1]

Hello All,

I have a custom widget with custom Modal containing fields.

I need help with making the fields mandatory/ restrict submission when following fields (title and business phone) are left empty.

The form should be successfully submitted only when those fields are filled.

Please help me to achieve the same.

HTML (Modal)

<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">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<h3 class="modal-title">Add a User</h3>
</div>
<div class="modal-body">
<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>


<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="title"><b>Title</b></label>
<input type="text" placeholder="Enter Title" class="form-control" name="title" ng-model="c.addUsr.title" required>
<!-- <input type="text" placeholder="Enter Title" class="form-control" name="title" required ng-model="c.addUsr.title"> -->
</div>
</div>

<div class="col-xs-6">
<div class="form-group">
<label for="busphone"><b>Business Phone</b></label> 
<input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model="c.addUsr.busphone" required>
<!--<input type="text" placeholder="Enter Business Phone" class="form-control" name="busphone" ng-model = "c.addUsr.busiphone" >-->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<!--<button type="submit" class="btn btn-primary" style="color:white;" ng-click="c.addExistinguser(n)" data-dismiss="modal">Submit</button>-->
<button type="submit" class="btn btn-primary" style="color:white;" data-dismiss="modal" ng-click="c.addExistinguser(n)">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
</div>
</div>
</div>
</div>

client controller

c.addExistinguser=function(n){

c.data.user = {value: c.data.user.name, displayValue:c.data.user.sys_id};			
c.data.action = 'addexistingUser';
c.data.exUser = c.addUsr;
//console.log(c.addUsr);
//console.log(n);
	/*if(c.addUsr.title!= '' && c.addUsr.busphone!='' ){
		c.closeexistingUserform(close);
	}
	else
	{
		spModal.alert("Please fill the Title and Business Phone");
	}*/
		
c.server.update().then(function(){
c.getUserlist();
});
};

TIA

@Ankur Bawiskar @Allen Andreas @priyasunku @SNOW BOT @Community Alums 

[Teja11]

Hi @DB1 ,

Just use "required" in an input field like this  

<input type="text" required/>

Regards,

Teja

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.

[DB1]

If you may have noticed. I have used it already. However it does not work. I want the modal to close when submit button is selected along with the case that the above 2 fields should be filled in.

And I am looking for help with the same