Kode.Error404 Kode.Error404 - 5 months ago 16
Javascript Question

External Javascript, CSS not working in Eclipse

I am a beginner in JS and I have checked that the external js files and css are linked. I have a form as shown below:
The 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>


The CSS here only run a certain portion and not all. The class red does not run at all
The 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;
}


The 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();


In this JS, i want to check if all fields are filled an not empty, but the page does not validate at all. Why is this so?

I would like to find out why did the CSS not show as specified.

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

Js- You Forgot to give Id's for everything, so nothing is actually being called. (You have names, not IDs)

With Regards to your CSS problem try the following:

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;
}

This isn't Javascript you can't comment with // only /**/. Also Note the span.red, this means select spans with the class red. You wrote select spans that are the children of .red

That should Fix it... Oh, one more thing, the action is being called before you are actually validating, You should some how submit that from 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();

EDIT: Sorry, Looks like you found your JS mistake while I was writing this answer, hope the rest helps though...

EDIT 2: Updated Code

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;
    }

The 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;
 }

EDIT 3: Try this perhaps?

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;
}

Edit 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;
}