如何在HTML、Javascript和PHP的混合中更改表单下的span标签的警告错误颜色？

huangapple
go评论108阅读模式
英文:

How to change the warning error's color of a span tag under a form in a mixture of HTML, Javascript and PHP

问题

I am trying to change the color of a warning error in a span tag under a form. I wrote toggle in JS using style.color or classList to change the color, but unable to change the color. Due to the space problem, I am not writing here the JS toggle code.

Here is the code:

PHP:

  1. $nameErr = "";
  2. $fname = "";
  3. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  4.      if (empty($_POST["fname"])) {
  5.           $nameErr = "Name is required";
  6.      } else {
  7.           $fname = cleanvar($_POST["fname"]);
  8.           if (!preg_match("/^[a-zA-Z ]*$/", $fname)) {
  9.                $nameErr = "Only letters allowed";
  10.           }
  11.      }
  12. }
  14. function cleanvar($userinput) {
  15.      $inp = trim($userinput);
  16.      $inp = stripslashes($userinput);
  17.      $inp = htmlspecialchars($userinput);
  18.      return $inp;
  19. }

HTML:

  1. <form method="post" class="formbox" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  2.      <div>
  3.           <label for="fname"> First Name</label>
  4.           <br />
  5.           <input type="text" name="fname" value="<?php echo $fname;?>" required>
  6.           <br />
  7.           <span style="font-size:14px;color:#063701;"> Only letters allowed </span>
  8.           <span style="font-size:14px;color:#FF0000;">
  9.           <?php echo $nameErr;?>
  10.           </span> 
  11.      </div>
  12.      <div>
  13.           <input type="submit" name="submit" class="buttons"  value="Submit">
  14.      </div>
  15. </form>
英文:

I am trying to change the color of a warning error in a span tag under a form. I wrote toggle in JS using style.color or classList to change the color, but unable to change the color. Due to the space problem, I am not writing here the JS toggle code.

Here is the code:

PHP:

  1.  $nameErr = &quot;&quot;;
  2.  $fname = &quot;&quot;;
  3.  if ( $_SERVER[ &quot;REQUEST_METHOD&quot; ] == &quot;POST&quot; ) {
  4.       if ( empty( $_POST[ &quot;fname&quot; ] ) ) {
  5.            $nameErr = &quot;Name is required&quot;;
  6.       } else {
  7.            $fname = cleanvar( $_POST[ &quot;fname&quot; ] );
  8.            if ( !preg_match( &quot;/^[a-zA-Z ]*$/&quot;, $fname ) ) {
  9.                 $nameErr = &quot;Only letters allowed&quot;;
  10.            }
  11.       }
  12.  }
  14.  function cleanvar( $userinput ) {
  15.       $inp = trim( $userinput );
  16.       $inp = stripslashes( $userinput );
  17.       $inp = htmlspecialchars( $userinput );
  18.       return $inp;
  19.  }

HTML:

  1.   &lt;form method=&quot;post&quot; class=&quot;formbox&quot; action=&quot;&lt;?php echo htmlspecialchars($_SERVER[&quot;PHP_SELF&quot;]);?&gt;&quot;&gt;
  2.       &lt;div&gt;
  3.            &lt;label for=&quot;fname&quot;&gt; First Name&lt;/label&gt;
  4.            &lt;br /&gt;
  5.            &lt;input type=&quot;text&quot; name=&quot;fname&quot; value=&quot;&lt;?php echo $fname;?&gt;&quot; required&gt;
  6.            &lt;br /&gt;
  7.            &lt;span style=&quot;font-size:14px;color:#063701;&quot;&gt; Only letters allowed &lt;/span&gt; &lt;span style=&quot;font-size:14px;color:#FF0000;&quot; &gt;
  8.            &lt;?php echo $nameErr;?&gt;
  9.            &lt;/span&gt; &lt;/div&gt;
  10.       &lt;div&gt;
  11.            &lt;input type=&quot;submit&quot; name=&quot;submit&quot; class=&quot;buttons&quot;  value=&quot;Submit&quot;&gt;
  12.       &lt;/div&gt;
  13.  &lt;/form&gt;

答案1

得分: 1

我创建了自己版本的您的代码，尝试为元素添加新样式并将其制作成警告框...

  1. &lt;form method=&quot;post&quot; class=&quot;formbox&quot; action=&quot;&lt;?php echo htmlspecialchars($_SERVER[&quot;PHP_SELF&quot;]);?&gt;&quot;&gt;
  2.     &lt;div&gt;
  3.         &lt;label for=&quot;fname&quot;&gt; 名字&lt;/label&gt;
  4.         &lt;br /&gt;
  5.         &lt;input type=&quot;text&quot; name=&quot;fname&quot; value=&quot;&lt;?php echo $fname;?&gt;&quot; required&gt;
  6.         &lt;br /&gt;
  7.         &lt;?php if(!empty($nameErr)){?&gt;
  8.            &lt;span class=&quot;alert-box&quot; style=&quot;display: block; width: fit-content; border-radius: 5px; font-size:14px;color:#fff; background-color: goldenrod; padding: 10px;&quot; &gt;
  9.                 &lt;?=$nameErr?&gt;
  10.            &lt;/span&gt;
  11.         &lt;?php } ?&gt; 
  12.         &lt;/div&gt;
  13.         &lt;div&gt;
  14.         &lt;input type=&quot;submit&quot; name=&quot;submit&quot; class=&quot;buttons&quot;  value=&quot;提交&quot;&gt;
  15.      &lt;/div&gt;
  16. &lt;/form&gt;

然后在JavaScript中，

  1. setTimeout(() =&gt; {
  2.     document.querySelector(&#39;.alert-box&#39;).style.display = &quot;none&quot;;
  3. }, 1000);

这将在表单提交后出现一次，出现错误时。

英文:

I create my own version of your code, I tried to put a new style to the span and make it an alert box...

  1. &lt;form method=&quot;post&quot; class=&quot;formbox&quot; action=&quot;&lt;?php echo htmlspecialchars($_SERVER[&quot;PHP_SELF&quot;]);?&gt;&quot;&gt;
  2.     &lt;div&gt;
  3.         &lt;label for=&quot;fname&quot;&gt; First Name&lt;/label&gt;
  4.         &lt;br /&gt;
  5.         &lt;input type=&quot;text&quot; name=&quot;fname&quot; value=&quot;&lt;?php echo $fname;?&gt;&quot; required&gt;
  6.         &lt;br /&gt;
  7.         &lt;?php if(!empty($nameErr)){?&gt;
  8.            &lt;span class=&quot;alert-box&quot; style=&quot;display: block; width: fit-content; border-radius: 5px; font-size:14px;color:#fff; background-color: goldenrod; padding: 10px;&quot; &gt;
  9.                 &lt;?=$nameErr?&gt;
  10.            &lt;/span&gt;
  11.         &lt;?php } ?&gt; 
  12.         &lt;/div&gt;
  13.         &lt;div&gt;
  14.         &lt;input type=&quot;submit&quot; name=&quot;submit&quot; class=&quot;buttons&quot;  value=&quot;Submit&quot;&gt;
  15.      &lt;/div&gt;
  16. &lt;/form&gt;

then in javascript,

  1. setTimeout(() =&gt; {
  2.     document.querySelector(&#39;.alert-box&#39;).style.display = &quot;none&quot;;
  3. }, 1000);

that will appear once the form is posted and an error has occured

huangapple
  • 本文由 发表于 2023年6月5日 06:14:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76402609.html
  • html
  • javascript
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定