Question 320111 in Html Question posted in
Some basic documentation can be found here.

html not implementing JS/CSS

[![enter image description here][1]][1]I have 3 files FormValidation.html, FormValidation.js, style.css
In the html head I have

    <script src="FormValidation.js"></script>
    <link rel="stylesheet" href="Style.css">

which I found and was expecting to "point" the other two (JS/CSS) to the html.

What happens, so when I run it the Form comes up I can type nothing and it doesn’t prompt the alerts in the JS, or the alignments from the CSS. I’m not sure what I’ve done incorrectly as the debug runs with no errors.

As always any tips or suggestions is always appreciated.

Full code below

<!DOCTYPE html>
<html lang="en"
<head>
    <title>
        Registration Form
    </title>
    <script src="FormValidation.js"></script>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1 style="text-align: center";>
        REGISTRATION FORM
    </h1>


    <form name="RegForm" onsubmit="return ValidForm()"
        method=""post>
    <p>
        Name:
            <input type="text" size="65" name="Name: "/>
    </p>
    <br />
    <p>
        Address:
        <input type="text" size="65" name="Address: "/>
    </p>
    <br />
    <p>
        Email:
        <input type="text" size="65" name="Email: "/>
    </p>
    <br />
    <p>
        Password:
        <input type="text" size="65" name="Password: "/>
    </p>
    <br />
    <p>
        Telephone:
        <input type="text" size="65" name="Telephone: "/>
    </p>
    <br />

    <p>
        SELECT YOUR COURSE
        <select type="text" value="" nam="Subject">
            <option>BTECH</option>
            <option>BBA</option>
            <option>BCA</option>
            <option>B.com</option>
            <option>GEEKFORGEEKS</option>
        </select>
    </p>
    <p>
        Comments:
        <textarea cols="55" name="Comment: "> </textarea>
    </p>
    <p>
        <input type="submit" value="send" name ="Submit"/>
        <input type="reset" value="reset" name="Reset"/>
    </p>
    </form>
</body>
</html>

function ValidForm(){
    var name =
        document.forms.RegForm.Name.Value;
    var email =
        document.forms.RegForm.EMail.value;
    var phone =
        document.forms.RegForm.Telephone.value;
    var subject = 
        document.forms.RegForm.Subject.Value;
    var password =
        document.forms.RegForm.Password.value;
    var address = 
        document.forms.RegForm.Address.value;
    /*Javascript reGex(regular expression= check to find sequence 
    of characters that match pattern in text.) for email validation.

    /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g 
    .The // at the begining and end indicate the regex
    .The ^$ indicate the entire input string should match the regex
    */
    var regEmail= /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
    /*javascript reGex for phone number validation.
    d{10} means that it should have 10 characters 
    matching any decimal digit including 0-9. */
    var regPhone=/^d{10}$/;
    /*javascript reGex for name validation.
    /d+$/g is a global search for non-digit characters*/
    var regName= /d+$/g;

    //focus() method is the element that will receive keyboard and similar events by default.
    if (name == "" || regName.text(name)){
        window.alert("Please use A-Z or a-z");
        name.focus()
        return false;
    }
    if (address ==""){
        window.alert("Please enter your address.");
        address.focus();
        return false;
    }
    if (email==""){
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (password==""){
        window.alert("Please enter your passowrd.");
        password.focus();
        return false;
    }
//setting password REQUIREMENTS.
    if (password.length <8){
        alert("ALERT: Password should be atleast 8 characters long.");
        console.log("CONSOLE LOG Error: Password must be atleast 8 Characters.")
        password.focus();
        return false;
    }else if(password.search([/[a-z]/])<0){
        alert("Alert: Password must contain atleast one lowercase letter.")
        console.log("Console Log Error: Password must contain atleast one lowercase letter.")
        password.focus();
        return false;
    }else if(password.search([/[A-Z]/])<0){
        alert("Alert: Password must contain atleast one uppercase letter.")
        console.log("Console Log Error: Password must contain atleast one uppercase letter.")
        password.focus();
        return false;
    }else if(password.search([/[0-9]/])<0){
        alert("Alert: Password must contain at least one number.")
        console.log("Console Log Error: Password must contain atleast one number.")
        password.focus();
        return false;
/*
w =any word character(regardless of case)
^$ =a match must start at beginning of a string and end at the end of the string
[] =character class- match any character contained in the character class.
*/
    }else if(password.search(/^(.*w){3.*}$/)){
        alert("Alert: Password must contain atlest 3 of the folloing: Uppercase, Lowercase, Numbers, Symbols. ")
        password.focus();
        return false;
    }
    
    else{
        console.log("Console log: Success!")
        password.focus();
    }

    if (phone ==""|| !regPhone.test(phone)){
        alert("Please enter valid phone number.");
    }
    if (subject.selectedIndex == -1){
        alert("Please select the Course.")
        subject.focus();
        return false;
    }
    return true;
}


div{
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
form{
    margin: 0 auto;
    width: 600px;
}

Edit** screen image of the content.js error mentioned in discussion. **Edit
[1]: https://phpout.com/wp-content/uploads/2024/01/qbvO0.png

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Quick shot out to all who assisted with getting this to work; your patience and understanding is appreciated.

    Okay, so below I've attached the final code(s) for HTML,JS, CSS.

    HTML- several typos, as far as I could tell the placement of the srs linking the js/css to the html didn't make a difference but I left it at the end of the body tag.

    JS - I was trying to access the password variable outside the ValidForm function. I fixed it by moving the password-related code inside the ValidForm function. There was also an issue with the password requirements. This was caused by the regEx in the password validation.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Registration Form</title>
</head>
<body>
    <h1 style="text-align: center;">REGISTRATION FORM</h1>

    <form name="RegForm" onsubmit="return ValidForm()" method="post" action="your-endpoint">
        <p>
            Name: <input type="text" size="65" name="Name"/>
        </p>
        <br />
        <p>
            Address: <input type="text" size="65" name="Address"/>
        </p>
        <br />
        <p>
            Email: <input type="text" size="65" name="Email"/>
        </p>
        <br />
        <p>
            Password: <input type="text" size="65" name="Password"/>
        </p>
        <br />
        <p>
            Telephone: <input type="text" size="65" name="Telephone"/>
        </p>
        <br />

        <p>
            SELECT YOUR COURSE
            <select type="text" value="" name="Topic">
                <option>BTECH</option>
                <option>BBA</option>
                <option>BCA</option>
                <option>B.com</option>
                <option>ValidForm</option>
            </select>
        </p>
        <p>
            Comments: <textarea cols="55" name="Comment: "></textarea>
        </p>
        <p>
            <input type="submit" value="send" name="Submit"/>
            <input type="reset" value="reset" name="Reset"/>
        </p>
    </form>

    <script src="FormValidation.js"></script>
    <link rel="stylesheet" href="Style.css">
</body>
</html>

    function ValidForm() {
    var name = document.forms.RegForm.Name.value;
    var email = document.forms.RegForm.Email.value;
    var phone = document.forms.RegForm.Telephone.value;
    var topic = document.forms.RegForm.Topic.value;
    var password = document.forms.RegForm.Password.value;
    var address = document.forms.RegForm.Address.value;

    // Regular expressions for validation
    var regEmail = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
    var regPhone = /^d{10}$/;
    var regName = /d+/g;

    // Validation for Name
    if (name == "" || regName.test(name)) {
        window.alert("Please use A-Z or a-z for the Name.");
        document.forms.RegForm.Name.focus();
        return false;
    }

    // Validation for Address
    if (address == "") {
        window.alert("Please enter your address.");
        document.forms.RegForm.Address.focus();
        return false;
    }

    // Validation for Email
    if (email == "" || !regEmail.test(email)) {
        window.alert("Please enter a valid e-mail address.");
        document.forms.RegForm.Email.focus();
        return false;
    }

// Validation for Password
if (password == "" || password.length < 8 || !/[a-z]/.test(password) || !/[A-Z]/.test(password) || !/d/.test(password) || !/(.*w){3,}/.test(password)) {
    window.alert("Password must be at least 8 characters long and include at least one lowercase letter, one uppercase letter, and one number.");
    document.forms.RegForm.Password.focus();
    return false;
}

    // Validation for Phone
    if (phone == "" || !regPhone.test(phone)) {
        window.alert("Please enter a valid phone number.");
        document.forms.RegForm.Telephone.focus();
        return false;
    }

    // Validation for Topic (Course)
    if (topic === "") {
        window.alert("Please select the Course.");
        document.forms.RegForm.Topic.focus();
        return false;
    }

    // Setting password requirements
    if (password == "" || password.length < 8 || !/[a-z]/.test(password) || !/[A-Z]/.test(password) || !/d/.test(password) || (password.match(/[a-z]/g) || []).length +
        (password.match(/[A-Z]/g) || []).length +
        (password.match(/d/g) || []).length +
        (password.match(/W/g) || []).length < 3) {
        alert("Password must be at least 8 characters long and include at least one lowercase letter, one uppercase letter, and one number.");
        document.forms.RegForm.Password.focus();
        return false;

    } else if ((password.match(/[a-z]/g) || []).length +
               (password.match(/[A-Z]/g) || []).length +
               (password.match(/d/g) || []).length +
               (password.match(/W/g) || []).length < 3) {
        alert("Alert: Password must contain at least 3 of the following: Uppercase, Lowercase, Numbers, Symbols.");
        document.forms.RegForm.Password.focus();
        return false;
    }

    // Rest of your code...

    if (phone === "" || !regPhone.test(phone)) {
        alert("Please enter valid phone number.");
        return false;
    }

    if (topic.selectedIndex == -1) {
        alert("Please select the Course.")
        topic.focus();
        return false;
    }

    console.log("Console log: Success!");
    return true;
}

    div {
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    text-align: center; /* Center the content horizontally */
}

form {
    margin: 0 auto;
    width: 600px;
}

  2. 0

    I see that you have not closed the <html> opening tag properly.
    Instead of

    <html lang="en"

    Use:

    <html lang="en">

    Although in most cases, html runs the code properly even with syntax errors.
    The screenshot that you have provided does not have the JavaScript and CSS files linked in the "<head>" section.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search