我在表单上有一个可编辑的输入框，我的问题是如何将其设置为required字段。
这是表格和我的工作：
<td contenteditable="true" class="empname" required></td>
我没有使用<form>，而是使用了表和JavaScript插入数据库。这是整个代码：
<?php
// Initialize the session
session_start();
// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: messages.php");
exit;
}
// Include config file
require_once "database_connection.php";
// Define variables and initialize with empty values
$username = $password = "";
$username_err = $password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Check if username is empty
if(empty(trim($_POST["username"]))){
$username_err = "Please enter username.";
} else{
$username = trim($_POST["username"]);
}
// Check if password is empty
if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
} else{
$password = trim($_POST["password"]);
}
// Validate credentials
if(empty($username_err) && empty($password_err)){
// Prepare a select statement
$sql = "SELECT id, username, password FROM users WHERE username = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_username);
// Set parameters
$param_username = $username;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Store result
mysqli_stmt_store_result($stmt);
// Check if username exists, if yes then verify password
if(mysqli_stmt_num_rows($stmt) == 1){
// Bind result variables
mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password, $hashed_password)){
// Password is correct, so start a new session
session_start();
// Store data in session variables
$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["username"] = $username;
// Redirect user to welcome page
header("location: messages.php");
} else{
// Display an error message if password is not valid
$password_err = "The password you entered was not valid.";
}
}
} else{
// Display an error message if username doesn't exist
$username_err = "No account found with that username.";
}
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// Close connection
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PC Request Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Questrial', sans-serif;
background-image: url("img/hero2.jpg");
background-size: cover;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px solid #ddd;
box-shadow: 1px 0 0 #fff;
background: #FF8C00;
opacity: 0.9;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: ;
padding: 0 20px;
text-decoration: none;
color: #444;
}
nav #signup a {
border-radius: 0 3px 3px 0;
}
nav #login-trigger {
border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background: #fff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #fff;
opacity: 0.9;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
border-radius: 3px 0 3px 3px;
border-bottom: 6px solid #FF8C00;
}
nav li #login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 225px;
border: 1px solid #ccc;
border-radius: 3px;
}
#inputs input:focus {
background-color: #fff;
border-color: ;
outline: none;
box-shadow:;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #FF8C00;
background-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 15px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #FFF;
}
#login #submit:hover,
#login #submit:focus {
background-color: #E88300;
background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
.ctn {
display: flex;
justify-content: center;
height: 100%;
min-height: 100%;
}
#check {
display: none;
}
.btn-label {
display: flex;
justify-content: center;
align-items: center;
background-color: #ff6347;
border: none;
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
margin-top: 20%;
height: 50px;
width: 200px;
}
.btn-text {
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
}
.load {
display: none;
width: 20px;
height: 20px;
border: 5px solid #fff;
border-radius: 100%;
}
.open {
border-top: 5px solid transparent;
-webkit-animation: load-animate infinite linear 1s;
animation: load-animate infinite linear 1s;
}
#check:checked ~ .btn-label > .btn-text {
display: none;
}
#check:checked ~ .btn-label > .load {
display: inline-block;
}
@-webkit-keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.twoToneCenter {
text-align: center;
margin: 1em 0;
}
.twoToneButton {
display: inline-block;
outline: none;
padding: 10px 20px;
line-height: 1.4;
background: #0c064e;
border-radius: 4px;
border: 1px solid #000000;
color: #dadada;
text-shadow: #000000 -1px -1px 0px;
position: relative;
transition: padding-right 0.3s ease;
font-weight: 700;
box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}
.twoToneButton:hover {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #f3f3f3;
}
.twoToneButton:active {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #ffffff;
background: #080808;
background: linear-gradient(to bottom, #3b3b3b 0%, #2e2e2e 50%, #141414 51%, #080808 100%);
}
.twoToneButton.spinning {
background-color: #0c064e;
padding-right: 40px;
}
.twoToneButton.spinning:after {
content: '';
right: 6px;
top: 50%;
width: 0;
height: 0;
box-shadow: 0px 0px 0 1px #080808;
position: absolute;
border-radius: 50%;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.twoToneButton.spinning:before {
content: "";
width: 0px;
height: 0px;
border-radius: 50%;
right: 6px;
top: 50%;
position: absolute;
border: 2px solid #fff;
border-right: 3px solid #27ae60;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
@-webkit-keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
@keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
select {
margin-bottom: 1em;
background: transparent;
padding: ;
border: 0;
border-bottom: 1px solid black;
font-weight: ;
letter-spacing:;
border-radius: 0;
&:focus, &:active {
outline: 0;
border-bottom-color: red;
}
}
</style>
</head>
<body>
<div id="login-content" style="margin-left: 40px; font-family: Questrial; position: relative;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#" style="color: black;">
View Requests <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="hidden" name="username" placeholder="Username" value="admin" required>
<input id="password" type="password" name="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="hidden" name="submitted" id="submitted" value="yes">
<input type="submit" id="submit" name="submit" value="Log in">
</fieldset>
</form>
</div>
</li>
</ul>
</nav>
</form>
</div>
<br /><br />
<div class="container" style="margin-left: 1%; margin-top: -5%">
<img src="img/corelogo.png" width="250px" style="margin-top: 2%;"></img>
<h4>PC Request Form <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button></h4>
<div class="table-responsive" style="width: 114%;">
<table class="table table-bordered" style="border-radius: 10px;" id="crud_table">
<tr>
<th width="10%" style="display: none;">Tracking Code</th>
<th width="10%" style="display: none;">Date Requested</th>
<th width="30%">Requested By</th>
<th width="10%">Start Date</th>
<th width="10%">Employee Name</th>
<th width="10%">Position</th>
<th width="10%">Account</th>
<th width="10%">Platform</th>
<th width="45%">Processor</th>
<th width="10%">RAM</th>
<th width="10%">Monitor</th>
<th width="10%">Phone</th>
<th width="10%">Phone Type</th>
<th width="10%">Headset</th>
<th width="10%">Table</th>
<th width="10%">Chair</th>
<th width="10%" style="display: none;">Approval</th>
<th width="10%" style="display: none;">Status</th>
</tr>
<tr>
<td class="req_date" style="display: none;"><?php echo date('Y-m-d');?></td>
<td contenteditable="true" class="reqname"></td>
<td class="date"><input type="date"></td>
<td contenteditable="true" class="empname"></td>
<td class="trackingcode" style="display: none;"></td>
<td class="position">
<select size="1">
<option>SpecOps</option>
<option>Account Specialist</option>
<option>Operations Manager</option>
<option>Supervisor</option>
<option>Admin</option>
<option>I.T.</option>
</select>
</td>
<td class="account">
<select size="1">
<option>Cintas - Hospitality</option>
<option>Cintas - Rentals</option>
<option>Cintas - Fire</option>
<option>Cintas - GSC</option>
<option>Metro Service</option>
<option>Cintas - DeepClean</option>
<option>Rogers</option>
<option>Olibra</option>
<option>American Towns</option>
</select>
</td>
<td class="platform">
<select size="1">
<option>Desktop</option>
<option>Laptop</option>
</select>
</td>
<td class="processor">
<select size="1">
<option>i3</option>
<option>i5</option>
<option>i7</option>
</select>
</td>
<td class="ram">
<select size="1">
<option>4GB</option>
<option>8GB</option>
</select>
</td>
<td class="monitor">
<select size="1">
<option>1</option>
<option>2</option>
</select>
</td>
<td class="phone">
<select size="1">
<option>Hard Phone</option>
<option>Soft Phone</option>
</select>
</td>
<td class="phonetype">
<select size="1">
<option>Direct Number</option>
<option>Extension</option>
</select>
</td>
<td class="headset">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_table">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_chair">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="approval" style="display: none;">Pending</td>
<td class="status" style="display: none;">Ongoing</td>
</tr>
</table>
<div align="right">
</div>
<div align="center" class="twoToneCenter">
<button class="twoToneButton" name="save" id="save">Send</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var twoToneButton = document.querySelector('.twoToneButton');
twoToneButton.addEventListener("click", function() {
twoToneButton.innerHTML = "Processing Request";
twoToneButton.classList.add('spinning');
setTimeout(
function (){
twoToneButton.classList.remove('spinning');
twoToneButton.innerHTML = "Send";
}, 1000000000);
}, false);
});
</script>
<script>
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td class='trackingcode' style='display: none;'></td>";
html_code += "<td class='req_date' style='display: none;''><?php echo date('Y-m-d');?></td>";
html_code += "<td contenteditable='true' class='reqname'></td>";
html_code += "<td class='date'><input type='date'></td>";
html_code += "<td contenteditable='true' class='empname'></td>";
html_code += "<td class='position'><select><option>SpecOps</option><option>Account Specialist</option><option>Operations Manager</option><option>Supervisor</option><option>Admin</option><option>I.T.</option></select></td>";
html_code += "<td class='account'><select><option>Cintas - Hospitality</option><option>Cintas - Rentals</option><option>Cintas - Fire</option><option>Cintas - GSC</option><option>Metro Service</option><option>Cintas - DeepClean</option><option>Rogers</option><option>Olibra</option><option>American Towns</option></select></td>";
html_code += "<td class='platform'><select><option>Desktop</option><option>Laptop</option></select></td>";
html_code += "<td class='processor'><select><option>i3</option><option>i5</option><option>i7</option></select></td>";
html_code += "<td class='ram'><select><option>4GB</option><option>8GB</option></select></td>";
html_code += "<td class='monitor'><select><option>1</option><option>2</option></select></td>";
html_code += "<td class='phone'><select><option>Hard Phone</option><option>Soft Phone</option></select></td>";
html_code += "<td class='phonetype'><select><option>Direct Number</option><option>Extension</option></select></td>";
html_code += "<td class='headset'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_table'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_chair'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='approval' style='display: none;'>Pending</td>";
html_code += "<td class='status' style='display: none;'>Ongoing</td>";
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#save').click(function(){
var trackingcode = [];
var req_date = [];
var reqname = [];
var date = [];
var empname = [];
var position = [];
var account = [];
var platform = [];
var processor = [];
var ram = [];
var monitor = [];
var phone = [];
var phonetype = [];
var headset = [];
var req_table = [];
var req_chair = [];
var approval = [];
var status = [];
$('.trackingcode').each(function(){
trackingcode.push($(this).text());
});
$('.req_date').each(function(){
req_date.push($(this).text());
});
$('.reqname').each(function(){
reqname.push($(this).text());
});
$('.date').each(function(){
date.push($(this).find('input').val());
});
$('.empname').each(function(){
empname.push($(this).text());
});
$('.position').each(function(){
position.push($(this).find('select').val());
});
$('.account').each(function(){
account.push($(this).find('select').val());
});
$('.platform').each(function(){
platform.push($(this).find('select').val());
});
$('.processor').each(function(){
processor.push($(this).find('select').val());
});
$('.ram').each(function(){
ram.push($(this).find('select').val());
});
$('.monitor').each(function(){
monitor.push($(this).find('select').val());
});
$('.phone').each(function(){
phone.push($(this).find('select').val());
});
$('.phonetype').each(function(){
phonetype.push($(this).find('select').val());
});
$('.headset').each(function(){
headset.push($(this).find('select').val());
});
$('.req_table').each(function(){
req_table.push($(this).find('select').val());
});
$('.req_chair').each(function(){
req_chair.push($(this).find('select').val());
});
$('.approval').each(function(){
approval.push($(this).text());
});
$('.status').each(function(){
status.push($(this).text());
});
$.ajax({
url:"insert-message.php",
method:"POST",
data:{trackingcode:trackingcode, req_date:req_date, reqname:reqname, date:date, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset, req_table:req_table, req_chair:req_chair, approval:approval, status:status},
success:function(data){
alert(data);
window.location.reload()
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
});
});
</script>
答案 0 :(得分：0)
标签（如果是单元格的话）
您必须以这种方式使用in标记
<td><input type="text" name="input_name" class="input_class" required></td>
答案 1 :(得分：0)
您将不得不使用javascript或jQuery。
$('#save').click(function(){
var valid = true;
// Check for validation here, then proceed
$.each($('[required]'), function(v){
if ($.trim(v.html()) == '') {
isValid = false;
return;
}
});
if (!isValid) {
// highlight fields in red or whatever to show user error(s) here
return false;
}
// continue with the rest of your code here
});