Проверка формы Javascript с классом ⇐ Html

[Anonymous]

Я использовал форму HTML5 для веб-сайта. Я подумал, что если я использую HTML5, форма автоматически проверится. Но это не будет правильно для всех полей во всем браузере. Итак, мне пришлось использовать JavaScript. Поскольку я не являюсь экспертом в JavaScript, мне приходится сталкиваться с множеством проблем.

Вот веб-сайт

1) Чтобы отобразить сообщение об ошибке, я создаю div(div id="validation") рядом с полем ввода. Я выбрал div из javascript с помощью document.getElementById. Но входное поле не одно. Есть много полей ввода. Итак, я должен использовать это как урок. Проблема в том, что я вообще не могу написать цикл/код для document.getElementsByClassName. По сути, мне неразумно использовать класс для этой проверки div # и использовать идентичный идентификатор для выбора с помощью javascript. Потому что может быть много форм одного и того же типа, таких как эта страница. Если кто-нибудь нажмет на значок редактирования, появится всплывающая форма. Итак, я должен использовать div.validation, а не div#validation. Я также боюсь идентификатора ввода. По ссылке выше сохранены те же поля ввода. Итак, если я нацеливаюсь/выбираю ввод по идентификатору формы из javascipt, он может не работать там, где
будет сохранено несколько форм. Итак, я не могу понять, что мне делать. Недавно я тестировал одно за другим определение проверки div #, и это сработало.

(a) Итак, пожалуйста, напишите код хотя бы для двух входных полей, предназначенных для класса из JavaScript. Итак, тогда я могу разместить javascript оставшегося поля ввода.
Снимок экрана: Когда я тестировал:
























Во-первых, я нигде не использую слово «обязательный», поскольку использую JavaScript. Но после многих попыток ничего не работает, я поместил атрибут «обязательный» как минимум в поле ввода в HTML, javascript работает! А без обязательных полей хотя бы в одном входном файле javascript не работает! Я не понимаю, почему это произошло. Я больше не хочу использовать слово «обязательный».

(b) Также мне нужен красный фон, если поле недействительно, например:

Как я могу сделать это с помощью CSS или JavaScript?

Необходимый HTML код:

Код: Выделить всё

Create New Job



Job ID:


Start Date:


Deadline:


Finish Date:


Budget($):


Client ID:


Client Phone Number:


Client Email address:


Bidder ID:


Number of Supervisor:

Select
1
2
3


Odesk Profile Link:


Owner Type:
Member
Employee

Message:

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

Подробнее здесь: [url]https://stackoverflow.com/questions/16471589/javascript-form-validation-with-class[/url]