提交JS表单的问题

提问者：小点点

提交JS表单的问题

这是关于先前提出的一个持续的问题。我正在尝试使用HTML、CSS和JavaScript制作一个联系表单。我所有的条件似乎都很好。这里的问题是，每当我输入一个特定字段失败，然后重新输入它时，错误消息仍然会显示出来。此外，我希望用户在单击Submit并满足所有条件后被重定向到另一个HTML页面。我想在这方面得到一些指导。随函附上守则，以供参考。

null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register with us</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/styles.css">

</head>

<body style="position: relative;">

<div class="container"> <br>

        <h1 class="text-center">Register with Us!</h1>


        <form>
            <div class="form-group">
                <label for="fname" id="firstname">First name: </label>
                <input type="text" class="form-control" id="fname" placeholder="Enter your first name">
                <small id="firstnameerror" class="form-text"></small>
            </div>
            <div class="form-group">
                <label for="lname" id="lastname">Last name: </label>
                <input type="text" class="form-control" id="lname" placeholder="Enter your last name">
                <small id="lastnameerror" class="form-text"></small>
            </div>

            <div class="form-group">
                <label for="emailid" id="emailaddress">Email address:</label>
                <input type="email" class="form-control" id="emailid" aria-describedby="emailHelp"
                    placeholder="Enter email">
                <small id="emailerror" class="form-text"></small>
            </div>

            <div class="form-group">
                <label for="pass1" id="password1">Password: </label>
                <input type="password" class="form-control" id="pass1" placeholder="Enter a password">
                <small id="passerror" class="form-text"></small>
            </div>

            <div class="form-group">
                <label for="confirmpass" id="password2">Confirm Password: </label>
                <input type="password" class="form-control" id="confirmpass" placeholder="Re-enter password">
                <small id="passerror2" class="form-text"></small>
            </div>

            <div class="form-group">
                <label for="phno" id="ctno">Contact number : </label>
                <input type="number" class="form-control" id="phno" placeholder="Enter your number here">
                <small id="phoneerror" class="form-text"></small>
            </div>


            <button type="submit">Submit</button>

        </form>



    </div>
    
    
    <script src="/js/vaildate.js"></script>




</body>

</html>

null

#firstnameerror,
#lastnameerror,
#emailerror,
#passerror,
#phoneerror{
    color: tomato;
    font-size: 1.1em;
    margin-left: 10%;
    margin-top: 2.5%;
}

#firstname,#lastname,#emailaddress,#password1,#password2,#ctno{
    padding: 0.7em;
    font-size: 1.3em;
    font-family: 'Noto Sans', sans-serif;    
    font-weight: 600;
    text-align: center;
    color: white;
    margin-left: 9%;
}

#fname,#lname,#emailid,#pass1,#confirmpass,#phno{
    margin: 0.3em 0.7em;
    width: 80%;
    font-family: 'Poppins', sans-serif;
    margin-left: 10%;
    background-color: black;
    border: none;
    padding: 1em;
    border-radius: 2em;
    color: white;
}


.container{
    margin-top: 20vh;
    background-image: linear-gradient(to right, rgb(46, 46, 46) , rgb(20, 20, 20));
    border-radius: 5em;

}

.container h1{
    color: white;
}

button{
    margin-left: 10%;
    margin-top: 2.5%;
    font-size: 1.4em;
    padding: 0.5em 1em;
    font-family: 'Open Sans', sans-serif;
    border-radius: 1.2em;
    outline: none;
    border: none;
    background-color: teal;
    color: white;
    font-weight: bold;
}

null

const form = document.querySelector(".container");
const firstname = document.getElementById("fname");
const lastname = document.getElementById("lname");
const emailid = document.getElementById("emailid");
const password = document.getElementById("pass1");
const confirmpassword = document.getElementById("confirmpass");
const phoneno = document.getElementById("phno");

// Function to check if first name is entered properly
function checkfname(fname) {
    let letters = /^[A-Z]+[a-z]+$/;
    if (fname.match(letters)) {

        document.getElementById("firstnameerror").innerHTML.style = "none";
        return fname;

    }

    else {
        document.getElementById("firstnameerror").innerHTML = "Please enter the details accurately";
        return false;

    }

}

// Function to check if first name is entered properly

function checklname(lname) {
    let letter = /^[A-Z]+[a-z]+$/;
    if (lname.match(letter)) {

        document.getElementById("firstnameerror").innerHTML.style = "none";
        return lname;

    }

    else {
        document.getElementById("firstnameerror").innerHTML = "Please enter the details accurately";
        return false;
    }
}

//function to check if the password is entered properly

function passcheck(pass) {
    var paswd = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;

    if (pass.match(paswd)) {
        document.getElementById("passerror").innerHTML.style = "none";
        return pass;

    }
    else {
        document.getElementById("passerror").innerHTML = "Entered password does not meet the requirements";
        return false;

    }
}

function phonecheck(phval) {
    var phonecheck = /\+?\d[\d -]{8,12}\d/;
    if (phval.match(phonecheck)) {
        document.getElementById("phoneerror").innerHTML.style = "none";
        return phval;
    }
    else {
        document.getElementById("phoneerror").innerHTML = "Please enter a valid phone number";
        return false;
    }
}

// Function to check if all parameters have been entered

function testfunc() {
    if (firstname.value == "") {
        document.getElementById("firstnameerror").innerHTML = "Please enter your first name";

    }
    else {

        firstname.value = checkfname(firstname.value);

    }

    if (lastname.value == "") {
        document.getElementById("lastnameerror").innerHTML = "Please enter your last name";
    }

    else {

        lastname.value=checklname(lastname.value);

    }
    if (emailid.value == "") {
        document.getElementById("emailerror").innerHTML = "Please enter your E-mail ID";

    }

    else {
        document.getElementById("emailerror").innerHTML.style = "none";

    }
    if (password.value == "") {
        document.getElementById("passerror").innerHTML = "Please enter a password";
    }

    else {
        password.value=passcheck(password.value);
    }

    if (confirmpassword.value == "") {
        document.getElementById("passerror2").innerHTML = "Enter the password again"
    }

    else if (confirmpassword.value == password.value) {
        document.getElementById("passerror2").innerHTML.style = "none";
        document.getElementById("passerror").innerHTML.style = "none";

    }

    else {
        document.getElementById("passerror2").innerHTML = "Passwords do not match";
    }

    if (phoneno.value == "") {
        document.getElementById("phoneerror").innerHTML = "Please enter your mobile number";
    }

    else {
        phoneno.value = phonecheck(phoneno.value);
    }
}

form.addEventListener("submit", function (e) {
    e.preventDefault();
    testfunc();
    
}

)

null

共2个答案

匿名用户

如果我是你，我会为每个输入添加事件监听器（在更改时）。然后将这些输入的值保存到变量中，并清除该特定输入的错误消息。从用户体验的角度来看，这种方式对我来说是最有意义的。

至于submit函数的重定向，只需使用W3Schools建议的方法之一：

// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com")

还有,

document.getElementById("firstnameerror").innerHTML.style = "none";

行不通。您需要的可能是清除文本：

 document.getElementById("firstnameerror").innerHTML = "";

或者隐藏元素本身：

 document.getElementById("firstnameerror").style.display = "none";

匿名用户

.style=“none”将不起作用。.style.display=“none”可能就是您想要的。

此外，您也可以通过HTML表单验证完成Javascript中检查的所有内容（或几乎所有内容），例如required Attribute。

提交JS表单的问题

共2个答案

相关问题

热门标签

提交JS表单的问题

共2个答案

相关问题

热门标签

微信关注