外部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没有按规定显示。

EDITED 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类在元素内的颜色span元素。它看起来也像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;
}