【问题标题】：javascript required input change input borderjavascript 需要输入更改输入边框
【发布时间】：2016-03-12 15:49:33
【问题描述】：

如果用户在发布后将输入留空，我会尝试更改边框

嗯，我试过了：

<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>";
?>

【问题讨论】：

使用required属性不是更方便吗？
required 与某些浏览器不兼容，我不会影响我想要一个边框
除了兼容性之外，您还可以使用:required pseudo-class为您设置所需的效果。

标签： javascript php html input border

【解决方案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
?>

【讨论】：

不，那没有意义
这很明显，因为没有括号，只有下一行算作语句。

【解决方案2】：

我的 javascript 解决方案：

HTML：

<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：

function myFunction() {
  if (document.getElementById("req").value == '') {
    event.preventDefault();
    required("req");
  } else {
    alert("pas vide");
  }

}

function required(id) {
  document.getElementById(id).style.border = "#FF0000 5px inset";
}

CodePen

【讨论】：

【解决方案3】：

我认为我有更好的方法：

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

然后在你的css中放入“#FF0000 5px inset”，创建类“required-input”或其他。

您的代码中没有侵入性脚本！

【讨论】：