Skip to content

Commit 1404292

Browse files
MarkRobboMarkRobbo
committed
Add form validation
1 parent 727695a commit 1404292

File tree

2 files changed

+71
-22
lines changed

2 files changed

+71
-22
lines changed

‎src/main/resources/static/js/main.js

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,25 +39,70 @@ require(['jquery'],
3939
});
4040

4141
/**
42-
* Validation for URL
42+
* Validation for form
4343
*/
4444
require(['jquery'],
4545
function ($) {
46-
$('#url').on('input', function() {
47-
var generalPattern = "\\/([A-Za-z0-9_.-]+)\\/([A-Za-z0-9_.-]+)\\/?(?:tree|blob)\\/([^/]+)(?:\\/(.+\\.cwl))$";
48-
var githubPattern = "^https?:\\/\\/github\\.com" + generalPattern;
49-
var gitlabPattern = "^https?:\\/\\/gitlab\\.com" + generalPattern;
50-
var gitPattern = "((git|ssh|http(s)?)|(git@[\\w\\.]+))(:(//)?)([\\w\\.@\\:/\\-~]+)(\\.git)(/)?";
46+
var generalPattern = "\\/([A-Za-z0-9_.-]+)\\/([A-Za-z0-9_.-]+)\\/?(?:tree|blob)\\/([^/]+)(?:\\/(.+\\.cwl))$";
47+
var githubPattern = new RegExp("^https?:\\/\\/github\\.com" + generalPattern);
48+
var gitlabPattern = new RegExp("^https?:\\/\\/gitlab\\.com" + generalPattern);
49+
var gitPattern = new RegExp("((git|ssh|http(s)?)|(git@[\\w\\.]+))(:(//)?)([\\w\\.@\\:/\\-~]+)(\\.git)(/)?");
5150

52-
var input = $(this).text();
53-
if (input.search(githubPattern) > 0 || input.search(gitlabPattern) > 0) {
54-
$("#extraInputs").fadeOut();
55-
$(this).closest(".form-group").addClass("has-success");
56-
} else if (input.search(gitPattern) > 0) {
51+
/**
52+
* Show extra details in form if generic git repository
53+
*/
54+
$("#url").on('change keyup paste', function () {
55+
var input = $(this).val();
56+
if (gitPattern.test(input)) {
5757
$("#extraInputs").fadeIn();
58+
} else {
59+
$("#extraInputs").fadeOut();
5860
}
61+
});
5962

60-
//$(this).closest(".form-group").addClass("has-warning");
61-
//$(".validateMessage").text("Git repository URL must be HTTP or HTTPS");
63+
/**
64+
* Clear warnings when fields change
65+
*/
66+
$("input").keyup(function() {
67+
var field = $(this);
68+
field.parent().removeClass("has-error");
69+
field.next().text("");
6270
});
71+
72+
/**
73+
* Validate form before submit
74+
*/
75+
$('#add').submit(function() {
76+
var pathPattern = new RegExp("^\\/?(\\w+\\/)*\\w+\\.cwl$");
77+
var input = $("#url").val();
78+
if (gitPattern.test(input)) {
79+
var success = true;
80+
if (!$("#branch").val()) {
81+
addWarning("branch", "You must provide a branch name for the workflow");
82+
success = false;
83+
}
84+
if (!$("#path").val()) {
85+
addWarning("path", "You must provide a path to the workflow");
86+
success = false;
87+
} else if (!pathPattern.test($("#path").val())) {
88+
addWarning("path", "Must be a valid path from the root to a .cwl workflow");
89+
success = false;
90+
}
91+
return success;
92+
} else if (!githubPattern.test(input) && !gitlabPattern.test(input)) {
93+
addWarning("url", "Must be a URL to a workflow on Gitlab or Github, or a Git repository URL");
94+
return false;
95+
}
96+
});
97+
98+
/**
99+
* Adds warning state and message to the a field
100+
* @param id The ID of the field
101+
* @param message The message to be displayed on the form element
102+
*/
103+
function addWarning(id, message) {
104+
var field = $("#" + id);
105+
field.parent().addClass("has-error");
106+
field.next().text(message);
107+
}
63108
});

‎src/main/resources/templates/index.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,27 +66,31 @@ <h2>Workflow URL</h2>
6666
<div class="alert alert-danger" th:if="${#fields.hasErrors('url')}">
6767
<strong>Error:</strong> <span th:errors="*{url}">Error message here</span>
6868
</div>
69-
<div class="form-group">
69+
<div id="urlGroup" class="form-group">
7070
<label class="control-label" for="url">URL to workflow</label>
7171
<input type="text" class="form-control" placeholder="Github, Gitlab or Git repository URL" id="url" name="url" th:field="*{url}" th:value="${formURL}" required="true" />
72-
<span class="validateMessage"></span>
72+
<span class="help-block"></span>
7373
</div>
7474
<div id="extraInputs" class="row">
75-
<div class="col-md-6">
76-
<label for="branch">Branch Name/Commit ID</label>
77-
<input type="text" class="form-control" placeholder="Branch Name or Commit ID" name="branch" />
75+
<div class="col-md-6 form-group">
76+
<label class="control-label" for="branch">Branch Name/Commit ID</label>
77+
<input type="text" class="form-control" placeholder="Branch Name or Commit ID" name="branch" id="branch" />
78+
<span class="help-block"></span>
7879
</div>
79-
<div class="col-md-6">
80-
<label for="path">Path to Workflow</label>
81-
<input type="text" class="form-control" placeholder="/path/to/workflow.cwl" name="path" />
80+
<div class="col-md-6 form-group">
81+
<label class="control-label" for="path">Path to Workflow</label>
82+
<input type="text" class="form-control" placeholder="/path/to/workflow.cwl" name="path" id="path" />
83+
<span class="help-block"></span>
8284
</div>
8385
</div>
84-
<button class="btn btn-primary pull-right" type="submit" style="margin-top:10px;">Parse Workflow</button>
86+
<button class="btn btn-primary pull-right" type="submit">Parse Workflow</button>
8587
</form>
8688
</div>
8789
</div>
8890
</div>
8991

9092
<div th:replace="fragments/footer :: copy"></div>
93+
94+
<script src="/bower_components/requirejs/require.js" data-main="/js/main.js"></script>
9195
</body>
9296
</html>

0 commit comments

Comments
 (0)