外部 Javascript，CSS 在 Eclipse 中不起作用

Question

我是 JS 的初学者，我检查了外部 js 文件和 css 是否链接。我有一个如下所示的表格： html:

<form id="theForm" action="submitData">
    <table>
        <tr>
            <td>Name:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="name" id ="name" class="Btn"></td>
            <td id="nameError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Contact Number:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="phone" id = "phone" class="Btn"></td>
            <td id="phoneError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Email:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="email" id = "email" class="Btn"></td>
            <td id="emailError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input style="color: black;" type="text" name="address" class="Btn"></td>
            <td>-</td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input style="color: black;" type="text" name="password" class="Btn">
            <td>-</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input style="color: black;" type="submit" value="SEND" id="submit"/>
            </td>
        </tr>
    </table>
</form> 

这里的 CSS 只运行一部分而不是全部。红班根本不跑 CSS：

//USER ACCOUNT CREATION VALIDATION CSS
.red span{  /* for error messages */
    font-style: italic; 
    color: red;
}

input.error {  /* for the error input text fields */
   border: 1px red inset;
   padding: 2px;
}

td {
   margin: 0;
   padding: 10px 10px 10px 3px;
}

JS：

window.onload = init;

// The "onload" handler. Run after the page is fully loaded.
function init() {
   // Attach "onsubmit" handler
   document.getElementById("theForm").onsubmit = validateForm;
   // Set initial focus
   document.getElementById("name").focus();
}

function validateForm() {
     return (isNotEmpty("name", "Please enter your name!")
                && isNotEmpty("address", "Please enter your address!")
                && isNotEmpty("phone", "Please enter a valid phone number!")
                && isNotEmpty("phone", "Enter 8 digits", 8, 8)
                && isNotEmpty("email", "Enter a valid email!")
                );
        }

// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
   var inputElement = document.getElementById(inputId);
   var errorElement = document.getElementById(inputId + "Error");
   var inputValue = inputElement.value.trim();
   var isValid = (inputValue.length !== 0);  // boolean
   showMessage(isValid, inputElement, errorMsg, errorElement);
   return isValid;
}
document.getElementById("theForm").submit();

在这个 JS 中，我想检查是否所有字段都填充了一个不为空的，但页面根本不验证。为什么会这样？

我想知道为什么 CSS 没有按规定显示。

编辑的 JS

<script>
function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    var phone = document.forms["myForm"]["phone"].value;
    var email = document.forms["myForm"]["email"].value;
    var add = document.forms["myForm"]["address"].value;
    var passwd = document.forms["myForm"]["password"].value;
    if (name == null || name == "" || phone == null || phone == "" || email == null || email == "" || add == null || add == ""
            || passwd == null || passwd == "") {
        alert("All must be filled out");
        return false;
    }
}</script>

Answer 1

Js- 你忘了给所有东西提供 ID，所以实际上没有调用任何东西。 （你有名字，而不是 ID）

关于您的 CSS 问题，请尝试以下操作：

span.red  {
  font-style: italic; 
  color: red;
}
input.error {
  /* for the error input text fields */

  border: 1px red inset;
  padding: 2px;
}

td {
  margin: 0;
  padding: 10px 10px 10px 3px;
}

这不是 Javascript，您不能仅使用 // 评论 /**/。另请注意 span.red，这意味着 select spans with the class red。你写了select spans that are the children of .red

那应该修复它...哦，还有一件事，在您实际验证之前调用该操作，您应该了解如何从 JS 提交它。

从输入中去掉提交，改成按钮，绑定点击事件input[type=submit]变成<button onclick="validateForm()">Submit</button>

在所有验证函数结束时 添加这个document.getElementById("theForm").submit();

编辑：对不起，看起来你在我写这个答案时发现了你的 JS 错误，但希望其余的帮助......

编辑 2：更新代码

HTML

<form id="theForm" action="submitData">
    <table>
        <tr>
            <td>Name:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="name" id ="name" class="Btn"></td>
            <td id="nameError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Contact Number:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="phone" id = "phone" class="Btn"></td>
            <td id="phoneError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Email:<span class="red">*</span></td>
            <td><input style="color: black;" type="text" name="email" id = "email" class="Btn"></td>
            <td id="emailError" class="red">&nbsp;</td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input style="color: black;" type="text" name="address" class="Btn"></td>
            <td>-</td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input style="color: black;" type="text" name="password" class="Btn">
            <td>-</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button id="submit" onclick="validateForm()">Submit</button>
            </td>
        </tr>
    </table>
</form> 

CSS：

span.red{  /* for error messages */
    font-style: italic; 
    color: red;
}

    input.error {  /* for the error input text fields */
       border: 1px red inset;
       padding: 2px;
    }

    td {
       margin: 0;
       padding: 10px 10px 10px 3px;
    }

JS：

     window.onload = init;
 // The "onload" handler. Run after the page is fully loaded.
 function init() {
     // Set initial focus
     document.getElementById("name").focus();
 }

 function validateForm() {
         var valid = (isNotEmpty("name", "Please enter your name!") &&
             isNotEmpty("address", "Please enter your address!") &&
             isNotEmpty("phone", "Please enter a valid phone number!") &&
             isNotEmpty("phone", "Enter 8 digits", 8, 8) && isNotEmpty(
                 "email", "Enter a valid email!"));
         if (valid) {
             document.getElementById("theForm").submit();
         }
     }
     // Return true if the input value is not empty

 function isNotEmpty(inputId, errorMsg) {
     var inputElement = document.getElementById(inputId);
     var errorElement = document.getElementById(inputId + "Error");
     var inputValue = inputElement.value.trim();
     var isValid = (inputValue.length !== 0); // boolean
     showMessage(isValid, inputElement, errorMsg, errorElement);
     return isValid;
 }

编辑 3：试试这个？

function validateForm() {
  var valid = true;
  $("input").each(function(e) {
    if (valid) {
  var value=$(e.target).val(); 
      if (value === undefined || value===""  ) {
        valid = false;
        alert("All Fields must be filled out");
      }
    }
  });
  return valid;
}

编辑 4：

function validateForm() {
  var valid = true;
  $("input").each(function() {
    if (valid) {
  var value=$(this).val(); 
      if (value === undefined) {
        valid = false;
        alert("All Fields must be filled out");
      }
    }
  });
  return valid;
}

编辑 5：

function validateForm() {
  var valid = true;
  $("input").each(function() {
    if (valid) {
  var value=$(this).val(); 
      if (value === undefined) {
        valid = false;
        alert("All Fields must be filled out");
      }
    }
  });
  return valid;
}

编辑 6：

function validateForm() {
  var valid = true;
  var ids = ["name", "phone", "email", "address", "password"];
  for (var x in ids) {
    var value = document.getElementById(ids[x]).value;

    if (value === undefined || value === "") {
      valid = false;

    }
  }

  if (!valid) {
    alert("All must be filled out");
  }
}

Answer 2

我不确定您的 JavaScript 问题，但 .red 类的错误是您已将其设置为仅具有 .red 类的元素内的颜色跨度元素。它也看起来像 input.error是不正确的。我认为你希望它只是 .error 所以当你将该类应用于输入字段时，它会改变。

.red {  /* for error messages */
  font-style: italic; 
  color: red;
}

.error {  /* for the error input text fields */
  border: 1px red inset;
  padding: 2px;
}

td {
  margin: 0;
  padding: 10px 10px 10px 3px;
}