即使输入无效，表单也会提交

Posted 2023-05-09

【中文标题】即使输入无效，表单也会提交

【英文标题】：Form submits even when there is an invalid input

【发布时间】：2021-01-08 03:51:07

【问题描述】：

我正在尝试验证我的 html 中的文本输入。我只想要字母和空格。一开始，验证有效，但现在无效，我似乎找不到问题所在。它仍然提交带有无效字段的表单。请看下面的代码

index.html

<div class="full-form">
    <form class=form-info action="cv.html" onsubmit="return handlesubmit()" >
    <div class="f-header">
        SIGN UP
    </div>
    
    <div class="bdetails">
        <label for="fname">First Name</label><br>
        <input type="text" name="fname" id="f_name" placeholder="First Name" onfocus="checkFName()" onblur="BlurFName()" required><br>
        <p class="error_message" id="First_em">Name must contain only alphabets(A-Z)</p>
    </div>
    <script type="text/javascript" src="test.js"></script>
    </form>

test.js

function checkData()
    if(BlurFName())
   
    
    return false;



function handlesubmit()
   checkData();
        passvalue();
    

/* 输入焦点时检查输入的名称是否有效的函数 */

function checkFName()
    let name_len=/^[A-Za-z]+$/;
    let fname= document.getElementById("f_name");
    if(!fname.value.match(name_len))
        document.getElementById("First_em").style.display = "inline";
        return true;
     
;

/* 输入模糊时检查输入名称是否有效的功能 */

function BlurFName()   
    let name_len=/^[A-Za-z]+$/;
    let fname= document.getElementById("f_name");

    if(fname.value.match(name_len))
        document.getElementById("First_em").style.display = "none";
        return false;
    

;

【问题讨论】：

handlesubmit 什么都不返回.....

@epascarello 好的。我已经更改了函数handlesubmit()，这次它没有提交，但是在更正无效输入后它仍然没有通过

返回真假在哪里？ function handlesubmit() let isValid = true; return isValid;

@epascarelloI 我已经尝试过了，但是在有效输入之后它没有提交

如果它有效，则不会返回 true

【参考方案1】：

使用函数句柄提交，您需要返回 false 或 true。

我建议使用

e.preventDefault();

更容易处理表单提交

【讨论】：

谢谢你，我试过了，但它没有提交

【参考方案2】：

您没有从您的验证方法中返回任何内容。你需要做这样的事情：

function validateName () 
  const inp = document.getElementById("fname");
  const isValid = inp.value.trim().length > 0;
  inp.classList.toggle('error', !isValid);
  return isValid;


function validateGuess () 
  const inp = document.getElementById("guess");
  const isValid = +inp.value.trim() > 10;
  inp.classList.toggle('error', !isValid);
  return isValid;


function validate () 
  const isNameValid = validateName();
  const isGuessValid = validateGuess();
  return isNameValid && isGuessValid;

.error  border-color: red; 

<form onsubmit="return validate()">
  <label for="fname">name</label> <input type="text" name="fname" id="fname" /><br/>
  <label for="guess">guess</label> <input type="number" name="guess" id="guess" />
  <button>Submit</button>
</form>