javascript - 外部 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 提交它。

Remove the submit from the input, change it to a button, and bind the click event the input[type=submit] becomes <button onclick="validateForm()">Submit</button>

At the end of all validation functions add this 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");
  }
}