我的HTML表单标签不重定向到另一个页面

b4lqfgs4 于 2023-10-14 发布在其他

关注(0)|答案(2)|浏览(138)

如何让表单标记中的按钮在单击时重定向到另一个页面？
我已经搜索了很多网站试图找到一个解决我的问题，但我仍然不能得到它的权利，我做了一个形式，我用JavaScript来验证它，所以当我点击提交按钮，它验证了输入，但它不带我到另一个页面，所以可以有人plz看看我的代码，并帮助我了。
我试图删除表单标签外的按钮，它把我带到另一个页面，但没有得到验证，好像我没有添加任何javascript到表单。我看到人们使用一种叫做php的东西，但我不知道那是什么，所以有人给予我一种方法，使我的表单使用我添加的java脚本，然后重定向到另一个页面
这是我的代码
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carma Form</title>
    <link rel="stylesheet" href="./page2.css">
    <script defer src="./page2.js"></script>
</head>

<body>
    <div class="header">
        <div class="logo"></div>
          <h1>carma</h1>
    </div>

    <div class="container">
        <form id="form" action="./page3.html" method="POST">
            <div class="input-control" id="all">
                <label for="firstname" class="heading">First Name</label>
                <input id="firstname" name="firstname" type="text">
                <div class="error" id="er"></div>
            </div>

            <div class="input-control" id="all">
                <label for="lastname" class="heading">Last Name</label>
                <input id="lastname" name="lastname" type="text">
                <div class="error" id="er"></div>
            </div>

            <div class="input-control" id="all">
                <label for="email" class="heading">Email</label>
                <input id="email" name="email" type="email">
                <div class="error" id="er"></div>
            </div>

            <div class="input-control">
                <label for="tely" class="heading">Phone Number</label>
                <input id="tely" name="tely" type="tel">
                <div class="error"></div>
            </div>

            <button class="Start-btn" type="submit" value="submit">Next</button>
        </form>

</body>
</html>

CSS

@font-face {
    font-family: Rebrand-header;
    src: url(./fonts/Rebrand\ Light.ttf);
}

@font-face {
    font-family: Henderson-Sana-basic;
    src: url(./fonts/Henderson\ Sans.otf);
}

@font-face {
    font-family: Henderson-Sana-bold;
    src: url(./fonts/HendersonSans\ Bold.otf);
}

*{
    margin:0;
    padding:0;
    box-sizing: 0;
    background-color: #f1eff4;
}

.header{
    display: flex;
    margin-top: 2%;
    margin-left: 41%;
}

.logo{
  background-image: url("./images/header\ 2.png");  
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 2%;
  margin-right: 1%;
  
}

.header h1{
    font-family: Rebrand-header;
    color: #0c0c4c;
    font-size: 300%;
}

.heading{
    margin-left:10px;
    color: #0c0c4c;
    font-size: 15px;
    font-family: Henderson-Sana-basic;
}

#all{
    margin-bottom: 30px;
}

#firstname{
    margin-top: 3px;
}

#lastname{
    margin-top: 3px;
}

#email{
    margin-top: 3px;
}

#tely{
    margin-top: 3px;
}


#form{
    width:300px;
    margin:5vh auto 0 auto;
    padding:20px;
    border-radius: 7px;
    font-size: 15px;
    font-family: Henderson-Sana-basic;
}

/*.btn{
    width:300px;
    margin:0 auto 0 auto;
    padding:20px;
    border-radius: 7px;
    font-size: 15px;
}*/

#form button{
    font-family: Henderson-Sana-basic;
    padding: 10px;
    margin-bottom:0px;
    width:50%;
    color:white;
    background-color: #1c1ce5;
    border:none;
    border-radius: 1.5em;
    cursor: pointer;
    margin-left:80px ;
}

#form button:hover{
    color: #1c1ce5;
    background:white ;
}

.input-control{
    display:flex;
    flex-direction: column;
}

.input-control input{
    border: 1px solid black;
    border-radius: 9px;
    display: block;
    font-size: 12px;
    padding:9px;
    width:100%;
}

.input-control input:focus{
    outline: 0;
}

.input-control.success input{
    border-color: #09c372;
}

.input-control.error input{
    border-color: #ff3860;
    margin-bottom: 5px;
}

.input-control.error{
    color: #ff3860;
    border-radius: 9px;
    display: block;
    font-size: 12px;
    padding:9px;
    width:100%;
    margin-bottom: 10px !important;
}

@media only screen and (max-width: 600px) {
    
    .header{
        margin-top: 15%;
        margin-left: 19%;
        display: flex;
    }

    .logo{
        background-image: url("./images/header\ 2.png");  
        width: 60px;
        height: 60px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 6%;
        margin-right: 2%;
        
      }

  }

java脚本

const form = document.getElementById('form');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const email = document.getElementById('email');
const tely = document.getElementById('tely');

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

const isValidPhone = tely => {
    const phone = /^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/;
    return phone.test(tely);
}

const validateInputs = () => {
    const firstnameValue = firstname.value.trim();
    const lastnameValue = lastname.value.trim();
    const emailValue = email.value.trim();
    const telyValue = tely.value.trim();

    if(firstnameValue === '') {
        setError(firstname, 'First Name is required');
    } else {
        setSuccess(firstname);
    }

    if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid Email address');
    } else {
        setSuccess(email);
    }

    if(lastnameValue === '') {
        setError(lastname, 'Last Name is required');
    }else {
        setSuccess(lastname);
    }

    if(telyValue === '') {
        setError(tely, 'Phone Number is required');
    } else if (!isValidPhone(telyValue)) {
        setError(tely, 'Phone Number must be of 10 characters');
    } else {
        setSuccess(tely);
    }

};

Html

来源：https://stackoverflow.com/questions/77248067/my-html-form-tags-are-not-redirecting-to-another-page

2条答案

按热度按时间

bqf10yzr1#

preventDefault（）取消可以取消的事件。e. js文件中的preventDefault（）阻止了提交操作，尽管表单有效。从validateInputs（）函数中获取一个布尔返回值，并像这样修改表单. addEventList。

form.addEventListener('submit', e => {
if(!validateInputs()){
    e.preventDefault();
}});

赞(0）回复(0）举报 2023-10-14

wz8daaqr2#

所以如果有人像我一样在挣扎，只要加上这个，它就能工作了，你只需要改变输入控制，用你称为你输入的任何类。

form.addEventListener('submit', e =>{
    
    validateInputs();
    
    console.log(isFormValid());
    if(isFormValid()==true){
        form.submit();
     }else {
         e.preventDefault();
     }

});

function isFormValid(){
    const inputContainers = form.querySelectorAll('.input-control');
    let result = true;
    inputContainers.forEach((container)=>{
        if(container.classList.contains('error')){
            result = false;
        }
    });
    return result;
}

赞(0）回复(0）举报 2023-10-14

我来回答

我的HTML表单标签不重定向到另一个页面

2条答案

相关问题

热门标签

最新问答