Commit 478f945e authored by Maxime Chaillet's avatar Maxime Chaillet

Merge branch 'issue25' into 'master'

Issue25 - Display error messages in welcome page

See merge request !22
parents 15c86b14 c7733f3d
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
# redirect a call to doi.esrf.fr to display the page welcome.html
RewriteRule "^$" "welcome.html" [NC,L]
# redirect a call to doi.esrf.fr/DOIprefix/DOIsuffix to doi.esrf.fr/index.html?DOI=DOIprefix/DOIsuffix
RewriteCond %{REQUEST_URI} !(\.js)
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -62,6 +62,11 @@ body {
margin:10px;
}
.padding-0{
padding-right:0;
padding-left:0;
}
.whiteBackground{
background-color: #ffffff;
}
......
......@@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8">
<title>ESRF</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="/min/output.min.css" >
<link rel="stylesheet" href="/min/output.min.css" >
</head>
<script src="/min/components.min.js"></script>
......@@ -13,13 +12,26 @@
<script src="/min/doi.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// retrieve the doi code from an url of the format http://doi.esrf.fr/prefix/suffix
var doi = document.location.pathname.substring(1);
new DOIController(new DOIView()).getData(doi);
});
$(document).ready(function() {
var doi = document.location.pathname.substring(1,document.location.pathname.length);
var controller = new DOIController(new DOIView());
if (doi !="") {
controller.setOrigin("index");
}
else {
controller.setOrigin("welcome-page");
}
controller.displayMainContent(doi);
});
// search the doi entered in the search box
function searchDOI(){
var doi = $('#doiSearchBox').val();
var controller = new DOIController(new DOIView());
controller.setOrigin("welcome-page");
controller.getData(doi);
};
</script>
</head>
<body>
......
This diff is collapsed.
html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f4f4f4}.container{width:auto;max-width:680px;padding:0 15px}.flex{display:flex}.doiTitle{font-size:30px}.blueBackground{background-color:#132577!important}.lightRedBackground{background-color:#ffcaca!important}.grayBackground{background-color:#dcdee2}.whiteVCenteredFont{color:#fff;margin-top:auto;margin-bottom:auto}.padding10{margin:10px}.whiteBackground{background-color:#fff}.welcomeBanner{heigth:100px}.whiteFont{color:#fff}.flexCentered{display:flex;justify-content:center;align-items:center}.height100p{height:100%}.btn{white-space:normal}.btn-primary:hover{}.btn-primary{border-color:#132577;background-color:#132577}.btn-primary.disabled{background-color:#132577;border-color:#132577}.btn.disabled{opacity :.50}label{font-weight:700}#logo{height:50px}.card-header{background-color:#CFD1D2}.modal{display:none;position:absolute;z-index:1000;top:82px;bottom:60px;background:rgba(0,0,0,.05) url(../src/images/ajax-loader.gif) 50% 50% no-repeat}body.loading{overflow:hidden}body.loading .modal{display:block}
\ No newline at end of file
html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f4f4f4}.container{width:auto;max-width:680px;padding:0 15px}.flex{display:flex}.doiTitle{font-size:30px}.blueBackground{background-color:#132577!important}.lightRedBackground{background-color:#ffcaca!important}.grayBackground{background-color:#dcdee2}.whiteVCenteredFont{color:#fff;margin-top:auto;margin-bottom:auto}.padding10{margin:10px}.padding-0{padding-right:0;padding-left:0}.whiteBackground{background-color:#fff}.welcomeBanner{heigth:100px}.whiteFont{color:#fff}.flexCentered{display:flex;justify-content:center;align-items:center}.height100p{height:100%}.btn{white-space:normal}.btn-primary:hover{}.btn-primary{border-color:#132577;background-color:#132577}.btn-primary.disabled{background-color:#132577;border-color:#132577}.btn.disabled{opacity :.50}label{font-weight:700}#logo{height:50px}.card-header{background-color:#CFD1D2}.modal{display:none;position:absolute;z-index:1000;top:82px;bottom:60px;background:rgba(0,0,0,.05) url(../src/images/ajax-loader.gif) 50% 50% no-repeat}body.loading{overflow:hidden}body.loading .modal{display:block}
\ No newline at end of file
(function(dust){dust.register("doi-not-found-page",body_0);function body_0(chk,ctx){return chk.w("<div class=\"container-fluid\"><div class=\"row\"><div class=\"col-12 text-center\" > <h2> Not found </h2> </div></div><div class=\"row\"><div class=\"col-3\" > </div><div class=\"col-6 lightRedBackground text-center\" > <p> ").f(ctx.get(["message"], false),ctx,"h",["s"]).w(" </p> </div><div class=\"col-3\" > </div></div></div> ");}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("esrf-landing-page",body_0);function body_0(chk,ctx){return chk.w("<div class=\"container-fluid\"><br /><div class=\"row\"><div class=\"col-8\"><label>Title</label><div class=\"alert alert-dark\" role=\"alert\">").f(ctx.getPath(false, ["data","title"]),ctx,"h").w(" </div><label> Abstract </label><div class=\"alert alert-warning alert-dismissible fade show text-center align-middle\" role=\"alert\">There is no abstract for this DOI<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"> <span aria-hidden=\"true\">&times;</span></button></div><p class=\"grayBackground\"></p><p><label> Experimental report </label><button type=\"button\" class=\"btn btn-primary btn-lg btn-block disabled\">Download experimental report</button></p><p><label> Download data </label><button type=\"button\" class=\"btn btn-primary btn-lg btn-block disabled\">Download data</button></p></div><div class=\"col-4\"><div class=\"row\"><div class=\"col-12\"><div class=\"card\"><div class=\"card-header text-center\"><label>Authors </label></div><div class=\"card-body text-center\">").s(ctx.getPath(false, ["data","author"]),ctx,{"block":body_1},{}).w("</div></div></div></div><br/><div class=\"row\"> <div class=\"col-12\"><div class=\"card\"><div class=\"card-header text-center\"><label>Beamline </label></div>").h("eq",ctx,{"else":body_4,"block":body_5},{"key":ctx.getPath(false, ["data","beamlineUrl"]),"value":"noLink"},"h").w("</div></div></div><br/><div class=\"row\"><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Proposal number </label></div><div class=\"card-body text-center height100p\">").f(ctx.getPath(false, ["data","proposalNumber"]),ctx,"h").w("</div></div></div><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Proposal type </label></div><div class=\"card-body text-center height100p\">").f(ctx.getPath(false, ["data","proposalType"]),ctx,"h").w("</div></div></div></div><br/><div class=\"row\"><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Release year </label></div><div class=\"card-body text-center\" style=\"height: 100%;\">").f(ctx.getPath(false, ["data","issued","date-parts"]),ctx,"h").w("</div></div></div><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Publisher </label></div><div class=\"card-body text-center\">").f(ctx.getPath(false, ["data","publisher"]),ctx,"h").w("</div></div></div></div></div></div></div>");}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w(" ").x(ctx.getPath(true, ["given"]),ctx,{"else":body_2,"block":body_3},{}).w(" ");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w(" ").f(ctx.getPath(true, ["literal"]),ctx,"h").w(" </br> ");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w(" ").f(ctx.getPath(true, ["given"]),ctx,"h").w(" ").f(ctx.getPath(true, ["family"]),ctx,"h").w(" </br> ");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w(" <div class=\"card-body text-center\"><a href=\"").f(ctx.getPath(false, ["data","beamlineUrl"]),ctx,"h").w("\"> ").f(ctx.getPath(false, ["data","beamline"]),ctx,"h").w(" </a> </div>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<div class=\"card-body text-center\"> ").f(ctx.getPath(false, ["data","beamline"]),ctx,"h").w(" </div>");}body_5.__dustBody=!0;return body_0}(dust));
\ No newline at end of file
(function(dust){dust.register("doi-not-found-page",body_0);function body_0(chk,ctx){return chk.w("<div class=\"container-fluid \" style=\"color:black;\"><div class=\"row\"><div class=\"col lightRedBackground text-center rounded\" style=\"border: 10px\" > <p> ").f(ctx.get(["message"], false),ctx,"h",["s"]).w(" </p> </div></div></div> ");}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("doi-not-found-page2",body_0);function body_0(chk,ctx){return chk.f(ctx.get(["message"], false),ctx,"h",["s"]);}body_0.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("esrf-landing-page",body_0);function body_0(chk,ctx){return chk.w("<div class=\"container-fluid\"><br /><div class=\"row\"><div class=\"col-8\"><label>Title</label><div class=\"alert alert-dark\" role=\"alert\">").f(ctx.getPath(false, ["data","title"]),ctx,"h").w(" </div><label> Abstract </label><div class=\"alert alert-warning alert-dismissible fade show text-center align-middle\" role=\"alert\">There is no abstract for this DOI<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"> <span aria-hidden=\"true\">&times;</span></button></div><p class=\"grayBackground\"></p><p><label> Experimental report </label><button type=\"button\" class=\"btn btn-primary btn-lg btn-block disabled\">Download experimental report</button></p><p><label> Download data </label><button type=\"button\" class=\"btn btn-primary btn-lg btn-block disabled\">Download data</button></p></div><div class=\"col-4\"><div class=\"row\"><div class=\"col-12\"><div class=\"card\"><div class=\"card-header text-center\"><label>Authors </label></div><div class=\"card-body text-center\">").s(ctx.getPath(false, ["data","author"]),ctx,{"block":body_1},{}).w("</div></div></div></div><br/><div class=\"row\"> <div class=\"col-12\"><div class=\"card\"><div class=\"card-header text-center\"><label>Beamline </label></div>").h("eq",ctx,{"else":body_4,"block":body_5},{"key":ctx.getPath(false, ["data","beamlineUrl"]),"value":"noLink"},"h").w("</div></div></div><br/><div class=\"row\"><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Proposal number </label></div><div class=\"card-body text-center height100p\">").f(ctx.getPath(false, ["data","proposalNumber"]),ctx,"h").w("</div></div></div><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Proposal type </label></div><div class=\"card-body text-center height100p\">").f(ctx.getPath(false, ["data","proposalType"]),ctx,"h").w("</div></div></div></div><br/><div class=\"row\"><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Release year </label></div><div class=\"card-body text-center\" style=\"height: 100%;\">").f(ctx.getPath(false, ["data","issued","date-parts"]),ctx,"h").w("</div></div></div><div class=\"col-lg-6\"><div class=\"card\"><div class=\"card-header text-center\"><label>Publisher </label></div><div class=\"card-body text-center\">").f(ctx.getPath(false, ["data","publisher"]),ctx,"h").w("</div></div></div></div></div></div></div>");}body_0.__dustBody=!0;function body_1(chk,ctx){return chk.w(" ").x(ctx.getPath(true, ["given"]),ctx,{"else":body_2,"block":body_3},{}).w(" ");}body_1.__dustBody=!0;function body_2(chk,ctx){return chk.w(" ").f(ctx.getPath(true, ["literal"]),ctx,"h").w(" </br> ");}body_2.__dustBody=!0;function body_3(chk,ctx){return chk.w(" ").f(ctx.getPath(true, ["given"]),ctx,"h").w(" ").f(ctx.getPath(true, ["family"]),ctx,"h").w(" </br> ");}body_3.__dustBody=!0;function body_4(chk,ctx){return chk.w(" <div class=\"card-body text-center\"><a href=\"").f(ctx.getPath(false, ["data","beamlineUrl"]),ctx,"h").w("\"> ").f(ctx.getPath(false, ["data","beamline"]),ctx,"h").w(" </a> </div>");}body_4.__dustBody=!0;function body_5(chk,ctx){return chk.w("<div class=\"card-body text-center\"> ").f(ctx.getPath(false, ["data","beamline"]),ctx,"h").w(" </div>");}body_5.__dustBody=!0;return body_0}(dust));
(function(dust){dust.register("welcome-page",body_0);function body_0(chk,ctx){return chk.w(" <div class=\"container-fluid\"><div class=\"row\"><div class=\"col-12 flexCentered whiteFont\" style=\"color:#132577; font-size: 4rem; height: 200px; margin-top: 10px; margin-bottom: 10px;\">ESRF Data Portal</div></div></div><div class=\"container-fluid\"><div class=\"row\"><div class=\"col-12 col-md-4\"><div class=\"padding10\"><div class=\"card-header text-center\"><h2>About the portal</h2></div><div class=\"card-body padding10\">This page centralizes the services offered by the ESRF to access data stored at the facility as part of its data policy.<ul><li>DOI search engine</li><li>Data catalogue <a href=\"https://icat.esrf.fr\"> icat.esrf.fr</a></li></ul></div></div></div><div class=\"col-12 col-md-4\"><div class=\"padding10\"><div class=\"card-header text-center \"><h2>DOI resolver</h2></div><div class=\"card-body padding10\"><p>The search engine below only finds DOI which have been minted at ESRF. </br> Use <a href=\"https://doi.org\">doi.org </a> search engine for any other DOI.</p><div class=\"row\"><div class=\"col-xl-9 padding-0\"><input id=\"doiSearchBox\" class=\"form-control\" placeholder=\"10.5072/...\" type=\"text\" required/><div class=\"text-danger\" id=\"error\"> </div> </div><div class=\"col padding-0\"> <input class=\"btn btn-primary\" type=\"submit\" value=\"Search\" onclick=\"searchDOI()\" /> </div></div> </div> </div></div><div class=\"col-12 col-md-4\"><div class=\"padding10\"><div class=\"card-header text-center\"><h2>About DOI</h2></div><div class=\"card-body padding10\">The Digital Object Identifier (<a href=\"https://www.doi.org/\">DOI</a>) is a code composed of digits and characters. It identifies data in aunique and perennial way thus referencing this data worldwide. The DOI has two parts namely the DOI prefixand the DOI suffix separated by a slash (\"/\") as depicted below :</p><pre>prefix/suffix </pre></div></div></div></div></div>");}body_0.__dustBody=!0;return body_0}(dust));
\ No newline at end of file
......@@ -5,7 +5,6 @@ function DOIController(view) {
// 10.5072 is the test esrf doi prefix;
// 10.15151 is the production esrf doi prefix;
this.acceptedPrefix = [ "10.5072", "10.15151" ];
this.view = view;
}
......@@ -28,7 +27,7 @@ DOIController.prototype.getData = function(doi) {
},
success : function(doiData) {
if (doiData) {
// extract fields from data.categories
// extract fields from data.categories
extractFieldsFromCategories(doiData);
// Retrieve the URL corresponding to the beamline name. Currently, the date of the
// experiment is calculated from the publicationYear.
......@@ -44,35 +43,28 @@ DOIController.prototype.getData = function(doi) {
}
);
} else {
dust.render('doi-not-found-page', {
message : "Sorry, the requested DOI was not found."
}, function(err, out) {
$("#main").html(out);
});
if (this.origin == "welcome-page") {
_this.view.displayMessage('doi-not-found-page', "Sorry, the requested DOI was not found.", "error" );
} else {
_this.view.displayMessage('doi-not-found-page', "Sorry, the requested DOI was not found.", "main" );
}
}
},
error : function(jqXHR, textStatus, errorThrown) {
$("#result").text("error: " + textStatus);
dust.render(
'doi-not-found-page',
{
message : "Sorry, there was a connexion problem with the datacite server."
},
function(err, out) {
$("#main").html(out);
});
error : function(jqXHR, textStatus, errorThrown) {
if (this.origin == "welcome-page") {
_this.view.displayMessage('doi-not-found-page', "Sorry, there was a connexion problem with the datacite server.", "error" );
} else {
_this.view.displayMessage('doi-not-found-page', "Sorry, there was a connexion problem with the datacite server.", "main" );
}
_this.view.setLoading(false);
}
});
} else {
dust.render(
'doi-not-found-page',
{
message : 'The DOI was not found at ESRF. (bad prefix). </br> Please use the DOI search engine at <a href="https://www.doi.org"> doi.org</a>.'
},
function(err, out) {
$("#main").html(out);
});
if (this.origin == "welcome-page") {
_this.view.displayMessage('doi-not-found-page2', '<h3> Not found ! </h3> <p> The DOI <b>' + doi + '</b> was not found at ESRF because its prefix is not ESRF specific. Please use the DOI search engine at <a href="https://www.doi.org"> doi.org</a>. </p>', 'error');
} else {
_this.view.displayMessage('doi-not-found-page', '<h2> Not found ! </h2> <p> The DOI <b>' + doi + '</b> was not found at ESRF because its prefix is not ESRF specific. </br> Please use the DOI search engine at <a href="https://www.doi.org"> doi.org</a>.</p>', 'main');
}
}
};
......@@ -84,6 +76,25 @@ DOIController.prototype.hasAcceptedPrefix = function(doi) {
return (_.findIndex(this.acceptedPrefix, function(o){ return prefix==o; }) != -1);
};
// Selects what will be displayed in the main id div
DOIController.prototype.displayMainContent = function(doi){
var isDOIProvided = false;
if (this.origin === "welcome-page" ) {
dust.render('welcome-page', {}, function(err, out) {
$("#main").html(out);
});
}
if (this.origin === "index" ) {
this.getData(doi);
}
};
// Set the origin from where the DOI controller is created. This affects the content of error messages for example
// depending on whether they are displayed in the "welcome-page" content or the "doi landing page" content.
DOIController.prototype.setOrigin = function(origin){
this.origin = origin;
};
// Search the corresponding url for a given beamline name
// @param: beamline, the beamline name
......@@ -107,8 +118,6 @@ DOIController.prototype.findsUrl = function(beamline, date){
};
//HELPER FUNCTIONS
// Finds a regular expression in a text
......@@ -147,6 +156,4 @@ function extractFieldsFromCategories(data) {
data.proposalType = catArray[index];
}
}
}
}
\ No newline at end of file
......@@ -13,3 +13,16 @@ DOIView.prototype.setLoading = function(message) {
DOIView.prototype.setDOI = function(doi) {
$("#doiPanel").html(doi);
};
DOIView.prototype.displayMessage = function(template, message, id){
dust.render(
template,
{
message : message
},
function(err, out) {
$("#" + id).html(out);
}
);
};
\ No newline at end of file
<div class="container-fluid">
<div class="container-fluid " style="color:black;">
<div class="row">
<div class="col-12 text-center" > <h2> Not found </h2> </div>
</div>
<div class="row">
<div class="col-3" > </div>
<div class="col-6 lightRedBackground text-center" >
<div class="col lightRedBackground text-center rounded" style="border: 10px" >
<p> {message|s} </p>
</div>
<div class="col-3" > </div>
</div>
</div>
{message|s}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESRF landing page</title>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<link
rel="stylesheet"
href="/min/output.min.css">
<script type="text/javascript">
function redirectDoiLandingPage(){
var doiName = window.document.getElementById("doiSearchBox").value;
window.open("https://doi.esrf.fr/" + doiName, "_self");
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 blueBackground">
<img
id="logo"
style="height: 80px;"
src="/src/images/esrfLogo.png"
alt="the ESRF logo"> </img>
</div>
<div class="col-12 col-sm-8 blueBackground flex"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div
class="col-12 flexCentered whiteFont"
style="color:#132577; font-size: 4rem; height: 200px; margin-top: 10px; margin-bottom: 10px;">ESRF Data Portal</div>
<div class="col-12 flexCentered whiteFont" style="color:#132577; font-size: 4rem; height: 200px; margin-top: 10px; margin-bottom: 10px;">ESRF Data Portal</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4">
......@@ -66,30 +27,30 @@ function redirectDoiLandingPage(){
<h2>DOI resolver</h2>
</div>
<div class="card-body padding10">
The search engine below only finds DOI which have been minted at ESRF. </br> Use <a href="https://doi.org">
doi.org </a> search engine for any other DOI.
</p>
<p>
<input
id="doiSearchBox"
type="text"
value="10.5072/..." /> <input
type="submit"
value="Search"
onclick="redirectDoiLandingPage()" />
The search engine below only finds DOI which have been minted at ESRF. </br> Use <a href="https://doi.org">
doi.org </a> search engine for any other DOI.
</p>
</div>
<div class="row">
<div class="col-xl-9 padding-0">
<input id="doiSearchBox" class="form-control" placeholder="10.5072/..." type="text" required/>
<div class="text-danger" id="error"> </div>
</div>
<div class="col padding-0">
<input class="btn btn-primary" type="submit" value="Search" onclick="searchDOI()" />
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="padding10">
<div class="card-header text-center">
<h2>About DOI</h2>
</div>
<div class="card-body padding10">
The Digital Object Identifier (DOI) is a code composed of digits and characters. It identifies data in a
The Digital Object Identifier (<a href="https://www.doi.org/">DOI</a>) is a code composed of digits and characters. It identifies data in a
unique and perennial way thus referencing this data worldwide. The DOI has two parts namely the DOI prefix
and the DOI suffix separated by a slash ("/") as depicted below :
</p>
......@@ -99,26 +60,4 @@ function redirectDoiLandingPage(){
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6">
<p>
<a
style='font-weight: bold;'
href="http://www.esrf.eu">European Synchrotron Radiation Facility</a>
</p>
</div>
<div class="col-12 col-md-6">
<p
class="float-right"
style="font-size: 12px; display: block;">
Access to data is governed by the <a href="http://www.esrf.eu/datapolicy">ESRF data policy</a>.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
\ No newline at end of file
</div>
\ No newline at end of file
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="text-danger">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment