Question

<form onsubmit="myfunction()">//sign up content</form>

function myfunction() {
                document.getElementById('signUpContent').style.display = "none";
                document.getElementById('MessageToBeDisplayed').style.display = "block";
            }

我正在制作一个网站注册页面，并且当我单击“提交”按钮时，我已将其设置为验证我的表单，但是我无法同时使用表单验证和onclick。如果用户输入是正确的，则应执行onclick函数。

我尝试将onclick和onsubmit事件添加到按钮标签和表单标签，但这没有用

Answer 1

您可以使用onclick或onsubmit，但必须在表单上使用onclick的onclick按钮和onsubmit，然后才能验证表单，如果出现问题，return将会停止某些事情并停止执行代码

这是示例

 $form.onsubmit = function(){
   if($input.value.length < 1){
      return false;
   }
   alert('Form validated successfully')
 }

编辑

在您编辑帖子时，我认为您不是在尝试将数据发送到服务器，而是通常使用表单，在这种情况下，如果您要更改html元素的设计，则必须防止默认表单操作（也许您已经注意到，当您单击“提交”按钮时，页面将重新加载，并且输入的数据已添加到搜索栏上），您可以使用e.preventDefault()进行操作，而且由于我的代码中没有验证，因此我无法正确理解您的需求。为什么需要同时使用表单验证和onclick。

这是我对您需要采取的操作（基于您的代码）了解的示例

 document.querySelector('form').onsubmit = function(e){
     e.preventDefault();
     document.getElementById('signUpContent').style.display="none";
     document.getElementById('MessageToBeDisplayed').style.display="block";         
     //do your validation
 }

如果您需要基于按钮单击的操作，则可以

document.querySelector('button').onclick = function(e){
    e.preventDefault();
    document.getElementById('signUpContent').style.display = "none"         
    document.getElementById('MessageToBeDisplayed').style.display = "block";
    //do your validation
}

如果这无济于事，请提供更多信息。您所需要的描述太晦涩。

Answer 2

只需更改为按钮并在其上单击功能即可。

将调用onclick函数时，在其中添加一个if条件来验证表单，以便您可以检查表单是否有效，如果有效则前进，否则返回表单并更新错误。

if(checkIsFormValid()){
// do whatever you want to do on onclick
}

如果表单有效，如何验证表单（使用JavaScript）并运行函数？

2 个答案: