HTML5表單驗證自定義

Question

我已經將HTML5表單用於網站。 我在所有字段中都使用“必需”。 結果，它防止將表單提交為空。 但是，它無法處理所有字段的正確語法。 請參閱網站我用輸入型=“文本”，“電話”，“號碼”，“日期”等，如果有人給輸入字的日期/數字/電話，仍然是接受！ 如果有人不打收音機，它也會被接受。 我以為，如果使用HTML5表單，則無需使用javascript進行驗證。 但是，也許我現在需要。 因此，在不更改任何設計/樣式的情況下，如何不允許在沒有正確的日期，電話，數字等語法的情況下提交表單？ 我已經檢查了Firefox的一切。 在Chrome瀏覽器中，一切與firefox相同。 僅對於輸入type =“ date”，chrome確保輸入正確的日期。

必要的HTML代碼：

<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" required />
                <label>Start Date:</label>
                <input type="date" name="start_date" id="start_date" placeholder="mm/dd/yy" required>
                <label>Deadline:</label>
                <input type="date" name="deadline" id="deadline" placeholder="mm/dd/yy" required>
                <label>Finish Date:</label>
                <input type="date" name="finish_date" id="finish_date" placeholder="mm/dd/yy" required>
                <label>Budget($):</label>
                <input type="number" name="Budget" id="Budget" placeholder="100" required>
                <label>Client ID:</label>
                <input type="text" name="client_id" id="client_id" placeholder="1" required />
                <label>Client Phone Number:</label>
                <input type="tel" name="phone" id="phone" placeholder="01712345891" required />
                <label>Bidder ID:</label>
                <input type="text" name="bidder_id" id="bidder_id" placeholder="1" required />
                <label>Number of Supervisor:</label>
                <select title="Supervisor">
                        <option>1</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <label>Odesk Profile ID:</label>
                <input type="url" name="odesk_id" id="odesk_id" placeholder="https://www.odesk.com/jobs/Frontend-engineer" required>
                <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 class="clear"></div>
                <label>Message:</label> 
                <textarea id="message" name="message" rows="2" cols="20" placeholder="Your enquiry goes here" required></textarea>
                <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;
}
.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 #909090;

}

.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;
}

Answer 1

那時，（至少大多數）瀏覽器沒有實現HTML5驗證。 現在，您可以使用給定的代碼，驗證就會進行。

即使這樣，“ tel”之類的字段也無法按預期工作。 然后，我通常使用“ pattern”來驗證RegExp。

例：

<input type="text" name="job_id" id="job_id"
    placeholder="1" required pattern="\d+"/>

如果您想要進一步的驗證功能，建議您使用此jQuery Validation插件 。