如何使可编辑输入框成为必填字段?

时间:2019-02-27 19:51:22

标签: php html

我在表单上有一个可编辑的输入框,我的问题是如何将其设置为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('&#x25B2;')
          else $(this).find('span').html('&#x25BC;')
        })
    });
</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>

2 个答案:

答案 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
});