I've used the HTML5 form for a website. I thought, if I use HTML5, it automatically valid the form. But, it won't properly for all the field at all the browser. So, I had to use javascript. As I ain't expert at javascript, I've to face lots of problems.
Here is the website
1)To show the error message, I create a div(div id="validation") beside the input field. I selected the div from javascript by document.getElementById. But, the input filed is not at one. There are many input field. So, I've to use that as class. Problem is there, I can't write the loop/code for document.getElementsByClassName at all.Basically, it's not wise for me to use class for that div#validation and use identical id for selecting by the javascript. Because, there can be same type of form in many number like this page. If anyone click the edit icon, there will be a popup form. So, I should use the div.validation not div#validation. I'm also afraid about the input id. At above link, there are same fielded input are stayed. So, if I target/select the input by id of the form from javascipt, it may not work where multiple form will be stayed. So, I can't understand what should I do. Recently, I've test one by one defining the div#validation and it worked.
(a) So, Please, write the code at least for two input filed targeting the class from javascript. So, I can put the javascript of remaining input field then.
Screenshot of When I tested:

One thing that, I don't use "required" at anywhere as I'm using javascript. But, after trying and trying when, nothing is working, I've put "required" attribute at aleast at input field at HTML, javascript works! And without required filed at least at one input filed, javascript is not work! I don't understand why this happened. I don't want to use "required" any more.
(b) Also I want a red background when the filed is invalid like this:
How can I do this with CSS or javascript?
Necessary HTML code:
<div class="wrapper">
<header class="page_title">
<h1>Create New Job</h1>
</header>
<section class="form">
<form id="form" name="form" method="post" action="#">
<label>Job ID:</label>
<input type="text" name="job_id" id="job_id" placeholder="1">
<div id="validation"></div>
<label>Start Date:</label>
<input type="text" name="start_date" id="start_date" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Deadline:</label>
<input type="text" name="deadline" id="deadline" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Finish Date:</label>
<input type="text" name="finish_date" id="finish_date" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Budget($):</label>
<input type="text" name="budget" id="budget" placeholder="100">
<div id="validation"></div>
<label>Client ID:</label>
<input type="text" name="client_id" id="client_id" placeholder="1">
<div id="validation"></div>
<label>Client Phone Number:</label>
<input type="text" name="phone" id="phone" placeholder="01712333333">
<div id="validation"></div>
<label>Client Email address:</label>
<input type="text" name="email" id="email" placeholder="[email protected]">
<div id="validation"></div>
<label>Bidder ID:</label>
<input type="text" name="bidder_id" id="bidder_id" placeholder="1">
<div id="validation"></div>
<label>Number of Supervisor:</label>
<select title="Supervisor" id="num_supervisor">
<option value="-1">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="validation"></div>
<label>Odesk Profile Link:</label>
<input type="text" name="odesk_link" id="odesk_link" placeholder="https://www.odesk.com/jobs/Frontend-engineer">
<div id="validation"></div>
<label>Owner Type:</label>
<input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label>
<input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label>
<div id="validation"></div>
<div class="clear"></div>
<label>Message:</label>
<textarea id="message" name="message" rows="2" cols="20" placeholder="Your enquiry goes here"></textarea>
<div id="validation"></div>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</section>
</div>
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a {
text-decoration: none;
}
.clear { clear: both; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
display: block;
}
h1 {
font-size: 26px;
}
body {
background: #fff;
font-family: sans-serif;
color: #333;
font-size: 12px;
line-height: 1em;
}
.wrapper {
width: 1000px;
margin: 0 auto;
position: relative;
background: #fff;
}
header.page_title {
background: #E3E3E3;
border-radius: 7px 7px 7px 7px;
color: #333;
padding: 20px;
margin: 40px 0 0 0;
}
.form {
width: 800px;
margin: 20px 0 0 2px;
border: none;
background: #fff;
}
form {
border: none;
background: #fff;
}
.form label {
display: block;
text-align: left;
width: 200px;
float:left;
margin: 5px 0 0 20px;
font-size: 15px;
}
.form label.text_label {
width: auto;
display: inline;
margin: 5px 20px 15px 10px;
}
.form input, .form select {
float:left;
font-size:13px;
margin: 0 0 10px 0;
padding: 0;
}
.form input:required {
}
input:valid {
border: 1px solid #909090;
}
input[type=text]:invalid, input[type=date]:invalid, input[type=number]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=url]:invalid, textarea:invalid {
border: 1px solid #FF0000;
}
.form input[type=text], .form input[type=date], .form input[type=number], .form input[type=email], .form input[type=tel], .form input[type=url] {
width: 500px;
height: 27px;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type=file] {
width: 500px;
}
.form select {
width: 500px;
height: 27px;
line-height: 27px;
padding: 3px 0 0 0;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type="radio"] {
margin: 5px 0 0 0;
}
.form textarea {
float: left;
width: 500px;
height: 82px;
margin: 0 0 10px 0;
padding: 0;
font-size: 13px;
border: 1px solid #909090;
}
.form input[type="submit"] {
margin: 10px 0 20px 220px;
width: 100px;
height: 30px;
background: #FF6D1F;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
border: none;
box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset;
border-radius: 5px;
cursor: pointer;
}
.form input[type="submit"]:hover {
background: #FF822E;
}
input[type=text]:focus, textarea:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, input[type=tel]:focus, input[type=url]:focus {
background: #fff;
border-color: #595959;
-webkit-box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
outline: none;
}
#validation {
background: #EAEAEA;
width: 165px;
height: 18px;
/*opacity: .5;*/
border: 1px solid #A69E7C;
float: left;
margin: -20px 0 0 -110px;
padding: 7px 5px 10px 10px;
border-radius: 0 0 7px 7px;
box-shadow: 0 0 2px #888;
color: #000;
line-height: 14px;
position: relative;
display: none;
}
input[type=radio] #validation {
margin-left: -10px;
}
.arrow {
width: 14px;
height: 15px;
position: absolute;
background: url(../images/arrow-down.png) no-repeat;
bottom: -15px;
left: 77px;
z-index: 120;
}
Javascript:
var submit = document.getElementById("submit");
submit.onclick = function() {
var job_id = document.getElementById("job_id").value;
var validation = document.getElementById("validation");
var form = document.getElementById("form");
if(job_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var start_date = document.getElementById("start_date").value;
if(start_date == "") {
validation.innerHTML = "Please, Enter the date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var deadline = document.getElementById("deadline").value;
if(deadline == "") {
validation.innerHTML = "Please, Enter the deadline";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var finish_date = document.getElementById("finish_date").value;
if(finish_date == "") {
validation.innerHTML = "Please, Enter the finish date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var budget = document.getElementById("budget").value;
if(isNaN(budget)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(budget == "") {
validation.innerHTML = "Please, Enter the Budget";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var client_id = document.getElementById("client_id").value;
if(client_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var phone = document.getElementById("phone").value;
if(isNaN(phone)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone == "") {
validation.innerHTML = "Please, Enter the Phone number";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length < 7) {
validation.innerHTML = "Phone Number should be at least 7 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length > 11) {
validation.innerHTML = "Phone Number should be at best 11 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var email = document.getElementById("email").value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if(email == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, enter email address";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
validation.innerHTML = "This is not a valid email address";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}
else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var bidder_id = document.getElementById("bidder_id").value;
if(bidder_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var num_supervisor = document.getElementById("num_supervisor").value;
if(num_supervisor == "-1") {
validation.style.display = 'block';
validation.innerHTML = "Please, select";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var odesk_link = document.getElementById("odesk_id").value;
var tomatch= /^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/;
if(odesk_link == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, Enter the url";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
} else if (tomatch.test(odesk_link)) {
validation.innerHTML = "";
validation.style.display = 'none';
return true;
}else {
validation.style.display = 'block';
validation.innerHTML = "This is not valid url";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
return false;
}
var owner_type = document.getElementById("owner_type").value;
if(owner_type == "") {
validation.style.display = 'block';
validation.style.marginLeft = '0';
validation.innerHTML = "Please, write something";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var message = document.getElementById("message").value;
if(message == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, write something";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
}
(c)The javascript for radio button, url link and textarea input didn't show the correct error message. I think, code for that section is okay, but what's the problem, I don't understand.





div's with the same ID? Why are you surpriseddocument.getElementByIddoesn't work when it returns one element and you have 20+ elements with that particular ID?