CodePen

Question

如果用户在发布

后将输入留空，则尝试更改边框好吧，我试过了：

<script>
   function required (id) {
       document.getElementById(id).style.border = "#FF0000 5px inset";
   }
</script>
<form method="post">
<input type='text' id='req' name='t'>
</form>
<?
if ($_POST)
   if (isset($_POST['t']))
        echo "u've done";
   else
        echo "<script>required('req');</script>";
?>

Answer 1

将您的PHP代码更改为以下内容：

<?php // <- no short tag
if ($_POST) { // <-- add brackets
   if (isset($_POST['t']))
        echo "u've done";
   else
        echo "<script>required('req');</script>";
} // <-- add brackets
?>

Answer 2

我认为我有更好的方法：

<form method="post">
<input type='text' id='req' name='t' <?php if(!$_POST['t']): ?>class='required-input'<?php endif;?>>
</form>

然后你把＆＃34;＃FF0000 5px插入＆＃34;在你的CSS中，创建课程＆＃34; required-input＆＃34;或者其他什么。

代码中没有侵入式脚本！

Answer 3

我的javascript解决方案：

HTML：

<div id="carousel1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="../images/Carousel_Placeholder.png" alt="First slide image" class="center-block">
      <div class="carousel-caption">
        <h3>First slide Heading</h3>
        <p>First slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="../images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">
      <div class="carousel-caption">
        <h3>Second slide Heading</h3>
        <p>Second slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="../images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">
      <div class="carousel-caption">
        <h3>Third slide Heading</h3>
        <p>Third slide Caption</p>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

JAVASCRIPT：

<form method="post" id="form1">
  <input type='text' id='req' name='t'>

</form>
<button type="submit" form="form1" value="Submit" onclick="myFunction()">Submit</button>

javascript必需输入更改输入边框

3 个答案:

CodePen