1
私はJSの初心者です。外部のjsファイルとCSSがリンクされていることを確認しました。 HTML：：外部のJavascript、CSSがEclipseで動作しない
<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"> </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"> </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"> </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だけで、すべての特定の部分を実行していない私は、以下のようにフォームを持っています。
//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：クラスの赤は、すべての CSSで実行されません。この中
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>
大丈夫です。問題は解決されていないようです。私は援助を求めてその部分をコピーしようとしましたが、コードを返すとすべてが失敗しました。私はあなたの答えを試みます。更新された質問を見てください！ –
@ Kode.Error404 CSSの問題は、.redの直上にあるコメントによって引き起こされ、その1行で修正されます。 JSについては、更新された回答を参照してください –
はい、私はすべてのフォームフィールドが満たされているかどうかをチェックするために私の関数を変更することにしました。より効率的な方法があるかどうか分かりますか？（質問を参照） –