I’m using the stuff that’s mentioned here:
http://learninfinity.info/demo/form_validation/#
And their code is here :
My code where I’m trying to use it based on my requirement (Not including other libraries as they are not required) -just pasting my index.html code below:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="style.css" rel="stylesheet" >
<link rel="stylesheet" href="js/style.css"/>
<link href="js/jquery.growl.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script type="text/javascript">
function getConcepts() {
//debugger;
const conceptsComp = window.selectedConceptsComponent
if (conceptsComp) {
//If I use the droptarget.js, I need to uncomment the next line
// const returnConcepts = conceptsComp.getWrappedInstance().ref.current.returnConcepts()
const returnConcepts = conceptsComp.getWrappedInstance().returnConcepts()
let conceptList = []
returnConcepts.map(concept => {
conceptList.push(concept.concept_path)
})
console.log(conceptList)
//alert('List of concept paths to download data: \n\n' + conceptList.join('\n'))
if(conceptList.length != 0){
console.log("Testing ResultInstance ID inside index.html");
console.log(sessionStorage.getItem("resultInstanceID"));
console.log(conceptList);
$.growl.notice({ title: "Success", message: "Requested data will be sent to you via email!" });
//Put your ajax call here
}
else {
//alert("Please select and drag something on the right hand side to download");
$.growl.error({title: "Error", message: "Please select and drag something on the right hand side and then request your data!" });
}
}
}
//Code to get displayed values from sessionStorage
var key = JSON.parse(sessionStorage.getItem("loggedInUser"));
var username = key.displayedValues;
console.log("USername retrieved in index.html");
console.log(username);
$(".dropdown-toggle").text(username);
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
</script>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" >
<img src="images/myimage.png" width = "210px" height = "50px" >
</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" ></a>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-sm-12 col-md-12 well " style="padding:0px;" id="content">
<h3>Custom Form !</h3>
</div>
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control" >
<option value=" " >Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
<!--<div class="form-group">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>-->
</div>
</div>
<div class="row" id="smartSearchDisp" style= "margin-top: 25px;">
<p>A div for smart search!</p>
</div>
<!--<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>-->
</form>
<!-- END form testing-->
<!--<div class="row" id="smartSearchDisp" style= "margin-top: 25px;">
<p>A div for smart search!</p>
</div>-->
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="js/downloader.js"></script>
<script type="text/javascript" src="js/jquery.growl.js"></script>
</body>
</html>
