我为网站使用了 HTML5 表单。我在所有领域都使用了“必需”。因此，它会阻止将表单提交为空。但是，它无法处理所有字段的正确语法。请参阅我使用过的网站input type="text"、"tel"、"number"、"date" 等。如果有人在 date/number/tel 输入单词，仍然可以接受！如果有人不勾选收音机，它也可以接受。我想，如果我使用 HTML5 表单，我不需要使用 javascript 进行验证。但是，也许我现在需要。那么，在不改变任何设计/风格的情况下，我怎么能不允许在没有正确的日期、电话、号码等语法的情况下提交表单？我已经在 Firefox 上检查了所有内容。在 chrome 上，一切都与 firefox 相同。仅用于输入类型 =“日期”，
必要的 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;
}