问题：

提交JS表单的问题

莫翰藻

2023-03-14

这是关于先前提出的一个持续的问题。我正在尝试使用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个答案

王景山

2023-03-14

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

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

莫选

2023-03-14

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

至于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";

类似资料：

Web表单提交之disabled问题js解决方法

本文向大家介绍Web表单提交之disabled问题js解决方法，包括了Web表单提交之disabled问题js解决方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了Web表单提交之disabled问题js解决方法。分享给大家供大家参考。具体分析如下：例如，有如下表单当我们提交表单时，在后台是获取不了pname数据的，因为该输入框的属性disabled。即能保存值也能保留用户不能输入这
用js提交表单解决一个页面有多个提交按钮的问题

本文向大家介绍用js提交表单解决一个页面有多个提交按钮的问题，包括了用js提交表单解决一个页面有多个提交按钮的问题的使用技巧和注意事项，需要的朋友参考一下用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本，然后再执行相应的动作，比较简单。
表单的提交

大家要切记这一点：　在任何 Single Page App中，js代码都不会产生一个传统意义的form表单提交！（这会引起整个页面的刷新）所以，我们往往用事件来实现．（桌面开发思维）假设，我们在远程有个接口，可以接受别人的留言： URL: http://siwei.me/interface/blogs/add_comment 参数：　content: 留言的内容．请求方式： POST 返回
表单提交

获取Form变量通过Action的如下方法可以获取变量： GetSlice GetString GetInt GetBool GetFloat GetFile GetForm 自动映射通常我们通过http.Request.Form来获得从用户中请求到服务器端的数据，这些数据一般都是采用name，value的形式提交的。xweb默认支持自动将这些变量映射到Action的成员中，并且这种映射支持子
HTML表单操作和提交问题

问题内容：我想在某些文本框条目上运行javascript用户验证。我遇到的问题是我的表单具有进入我们站点内新页面的作用，并且该属性从未运行javascript函数。有没有更好的解决方案，或者是可以使用以下代码的解决方案：注意：javascript文件编写正确，如果将操作切换为，则可以正常工作。这只是同时运行动作和JavaScript的问题。问题答案：您应该通过在onsubmit回调上返
html和php表单不提交问题

嗨，伙计们，我一直与使用超文本标记语言和PHP的网站之一有麻烦表单似乎没有提交或发送消息。附件是代码请任何帮助将是伟大的。另外，还附上了PHP和javascript作为参考。有时页面也不响应按钮。如果有人能修复代码将是伟大的。

提交JS表单的问题

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档