在使用JavaScript验证修订HTML代码

Question

I use this code for validation: 我使用以下代码进行验证：

<html>
<head>
     <script>
      function validateNew() {
        var x1 = document.forms["register"]["firstname"].value;
          if (x1 == null || x1 == "") {
           alert("Please enter your first name.");
      return false;
     }

   }
 </script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
 <label id="fname_lbl" class="">First Name
  <input type="text" name="firstname">
<input type="submit" value="Submit">
</form>

But I want to do something a little different. 但是我想做些不同的事情。 I had this code a while back, but I cant remember where I put it. 我之前有这段代码，但是我不记得我把它放在哪里了。 Basically, instead of a pop up window, I want the validate to conditionally trigger code in the html, which will accomplish the goal of preventing the submission, but show, let's say, text above the field that says, in red, "Required Field". 基本上，不是希望弹出窗口，而是让Validate有条件地触发html中的代码，这将实现防止提交的目标，但是，让我们在字段上方显示用红色表示的文本，“必填字段”。

The pseudo-code: 伪代码：

<html>
<head>
     <script>
      function validateNew() {
        var x1 = document.forms["register"]["firstname"].value;
          if (x1 == null || x1 == "") {
      $trigger = for label id('fname_lbl') class=="require";
      return false;
     }

   }
 </script>
</head>
<body>
<form name="register" method="POST" onsubmit="return validateNew()">
 <label id="fname_lbl" class="<? $trigger ?>">First Name
  <input type="text" name="firstname">
<input type="submit" value="Submit">
</form>

Where the class named "require" will turn the font color of 'First Name' to red. 名为“ require”的类将把“ First Name”的字体颜色变为红色。

So on the validation, when the code finds out there is no first name, it then, using a trigger variable, modifies that variable, which is read inside the quotes of 'class'. 因此，在验证中，当代码发现没有名字时，它将使用触发器变量修改该变量，该变量在“类”的引号内读取。

I know my pseudo-code is way off. 我知道我的伪代码已经走了。 I just remember being able to do something like that a couple years ago. 我只是记得几年前能够做类似的事情。

EDIT 编辑

I found that code snip 我发现该代码片段

<head>
<script>
    $(document).ready(function (){
        $("#b_down").change(function() {

            if ($(this).val() < 20 ) {
                $("#pmi").show();
            }else{
                $("#pmi").hide();
            } 
        });
    });
 </script>
 </head>
<body>    
<select name="b_down" id="b_down">
<option value=""></option>
<option value="1">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>

<? if ($row['b_down']<2) { ?>
<span id="pmi" style="display;" class="dropt">PMI:&nbsp; 
<? } else { ?>
<span id="pmi" style="display:none;" class="dropt">PMI:&nbsp; 
<? } ?>

Basically, on the change event, it either shows or hides a particular input. 基本上，在更改事件上，它显示或隐藏特定的输入。 Not sure how to apply it to my project. 不知道如何将其应用于我的项目。

Answer 1

You could use this: 您可以使用此：

<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
                .normal {
                color: #0f0;
                }
                .required {
                color: #f00;
                }
        </style>
    </head>
    <body>
        <form name="register" method="POST" onsubmit="return validateNew();">
            <label id="fname_lbl" class="normal">First Name</label>
            <input type="text" name="firstname">
            <input type="submit" value="Submit">
        </form>
    </body>
    <script>
    function validateNew() {
        var x1 = document.forms["register"]["firstname"].value;
        if (x1 == null || x1 == "") {

            document.getElementById("fname_lbl").className = "required";
            return false;
        }
    }
    </script>

在使用JavaScript验证修订HTML代码

问题描述

1 个解决方案

解决方案1
0 2016-05-25 18:35:19

在使用JavaScript验证修订HTML代码

问题描述

1 个解决方案

解决方案1 0 2016-05-25 18:35:19

解决方案1
0 2016-05-25 18:35:19