I am trying to add validation to a html form that looks like this:
<div id="container">
<header>
<h1>Production Form</h1>
</header>
</br>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<br><br>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="url" id="link" class="form-control" name="output[link]">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</section>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting
I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.
I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
and
:invalid {
border: 1px solid red;
}
This works and validates as expected.
:invalid {
border: 1px solid red;
}
input {
margin: 1em
}<div id="container">
<header>
<h1>Production Form</h1>
</header>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</div>
</section>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>Note that the validation patterns are only for testing and not real patterns that should be used!
I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
If you want the required attribute to work, I think you need to change your last input type to "submit" :
<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.
<form id="cf-task-form" onsubmit="return validateForm()">
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
if (link == '') {
alert("filled out url");
return false;
}
else if (Address == '') {
alert("filled out Address");
return false;
}
else if (research == '') {
alert("filled out research");
return false;
}
}