html - javascript form validation with class -
i've used html5 form website. thought, if use html5, automatically valid form. but, won't field @ browser. so, had use javascript. ain't expert @ javascript, i've face lots of problems.
here website
1)to show error message, create div(div id="validation") beside input field. selected div javascript document.getelementbyid. but, input filed not @ one. there many input field. so, i've use class. problem there, can't write loop/code document.getelementsbyclassname @ all.basically, it's not wise me use class div#validation , use identical id selecting javascript. because, there can same type of form in many number page. if click edit icon, there popup form. so, should use div.validation not div#validation. i'm afraid input id. @ above link, there same fielded input stayed. so, if target/select input id of form javascipt, may not work multiple form stayed. so, can't understand should do. recently, i've test 1 one defining div#validation , worked.
(a) so, please, write code @ least 2 input filed targeting class javascript. so, can put javascript of remaining input field then. screenshot of when tested: 
one thing that, don't use "required" @ anywhere i'm using javascript. but, after trying , trying when, nothing working, i've put "required" attribute @ aleast @ input field @ html, javascript works! , without required filed @ least @ 1 input filed, javascript not work! don't understand why happened. don't want use "required" more.
(b) want red background when filed invalid this: 
how can 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="john.smith@gmail.com"> <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; } { 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 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 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 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 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 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 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 phone number"; arrow = document.createelement("div"); arrow.classname = 'arrow'; validation.appendchild(arrow); }else if(phone.length < 7) { validation.innerhtml = "phone number should @ least 7 chars"; arrow = document.createelement("div"); arrow.classname = 'arrow'; validation.appendchild(arrow); }else if(phone.length > 11) { validation.innerhtml = "phone number should @ 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 not 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 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 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 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 radio button, url link , textarea input didn't show correct error message. think, code section okay, what's problem, don't understand.
if okay using jquery js library, here solution [for a) , b)]: http://jsfiddle.net/6flnz/4/
some comments:
- never ever ever use 1 id more once.
- for javascript, repeated same code awful lot of times; in case can make kind of 'template function' event handlers, don't have retype function everytime want launch it. of course have build specific functions conditionals don't evaluate
!==or===. - i had @ project, , seems big enough use jquery or js library might ease , speed development process.
- i put input verification on .focusout event, user immediatly notified of error after clicks/ shifts on input. can change line 22
input.on('focusout', function()$('#submit').on('click', function()if rather have functions firing on click of submit button.
jquery function reference:
$(document).ready(function() { // first define user inputs var inputs = []; inputs[0] = $('#job_id'); // job id input inputs[1] = $('#start_date'); // start date input inputs[2] = $('#deadline'); // deadline input // add other inputs here => inputs[3] = $('#<input id>'); // define errors (error indexes must same inputs' indexes, eg errors[0] inputs[0]) var errors = []; errors[0] = 'id cannot left empty'; // job id error errors[1] = 'please enter date'; // start date error errors[2] = 'please enter deadline'; // deadline error // add other errors here => errors[3] = $('#<input id>'); // these different validation patterns var expressions = []; expressions[0] = ''; expressions[1] = /regex/ ; // template function event handlers var showformvalidation = function showformvalidation(input, error, expression) { input.on('focusout', function() { if(input.val() == expression) { $(this).next('.validation').show(); $(this).next('.validation').html(error); $(this).css({'box-shadow': '0 0 3px red', '-moz-boxshadow': '0 0 3px red', '-webkit-boxshadow': '0 0 3px red', '-o-boxshadow': '0 0 3px red', 'border': '1px solid red' }); } else if(input.val() != expression) { $(this).next('.validation').hide(); $(this).css({'box-shadow': 'none', '-moz-boxshadow': 'none', '-webkit-boxshadow': 'none', '-o-boxshadow': 'none', 'border': '1px solid grey' }); } }); }; // function show form validation input, if input == '' for(i=0; < errors.length; i++) { showformvalidation( inputs[i], errors[i], expressions[0]); } });
Comments
Post a Comment