表单未提交且验证不起作用答案

【问题标题】：form does not submit and the validation not working表单未提交且验证不起作用
【发布时间】：2020-04-25 15:46:23
【问题描述】：

我是 javascript 新手，我创建了一个注册表单，但它没有提交并且验证不起作用。我不知道代码有什么问题。验证功能是检查输入是否只包含字母

文件.html

      <!DOCTYPE html>
    <html>
    <head>
     <title></title>
     <link rel="stylesheet" type="text/css" href="css/inscrption_form.css">
     <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
       <script  type="text/javascript"src="/js/script.js"></script>
    </head>
    <body>
    <header>
     <div class="mainheader">
      <div class="logo">
        <h2> A </h2>
  </div>
 </div>
</header>


    <form id="forme" onsubmit="return valider()">
        <table>
            <tr>
         <td colspan="2" align="center">
                 <h1> Form </h1>
             </tr>
        <tr>.. </tr>
        <tr>
            <td>*Nom</td>
            <td><input type="text" placeholder = "Sara" id = "nom"maxlength="25"  required></td>
            <small id="error2">errr </small>
        </tr>
       <tr>.. </tr>
        <tr>.. </tr>
       <tr>.. </tr>
         <tr>.. </tr>
       <tr>.. </tr>
        <tr>    
            <td colspan="2" align="center">
                <button type="submit"  value="Envoyer">sign up </button>

                <button type="reset"  value="Annuler">Annuler</button>
            </td>
        </tr>
        </table>
     </form>
</body>
</html>

script.js

    function valider()
{
    // nom test 
    var input = document.getElementById('nom');
    var alphabets = /^[A-Za-z]+$/ ;
    if(input.value.match(alphabets))
      { 
        return true ;
    }else{
     document.getElementById('error2').innerText ="only alphabets  "   
        return false ;
    }
}

【问题讨论】：

您在提交表单时是否在控制台中看到任何错误？您在网络面板中看到任何呼叫吗？

标签： javascript html css forms validation

【解决方案1】：

我将您的代码放在一个 sn-p 中，它工作正常。验证正常，表单提交到相同的 url。也许您想将 action 属性设置为表单并使用 method="POST" 发送。

  function valider()
{
    // nom test 
    var input = document.getElementById('nom');
    var alphabets = /^[A-Za-z]+$/ ;
    if(input.value.match(alphabets))
      { 
        return true ;
    }else{
     document.getElementById('error2').innerText ="only alphabets  "   
        return false ;
    }
}

    <!DOCTYPE html>
    <html>
    <head>
     <title></title>
     <link rel="stylesheet" type="text/css" href="css/inscrption_form.css">
     <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
       <script  type="text/javascript"src="/js/script.js"></script>
    </head>
    <body>
    <header>
     <div class="mainheader">
      <div class="logo">
        <h2> A </h2>
  </div>
 </div>
</header>


    <form id="forme" onsubmit="return valider()">
        <table>
            <tr>
         <td colspan="2" align="center">
                 <h1> Form </h1>
             </tr>
        <tr>.. </tr>
        <tr>
            <td>*Nom</td>
            <td><input type="text" placeholder = "Sara" id = "nom"maxlength="25"  required></td>
            <small id="error2">errr </small>
        </tr>
       <tr>.. </tr>
        <tr>.. </tr>
       <tr>.. </tr>
         <tr>.. </tr>
       <tr>.. </tr>
        <tr>    
            <td colspan="2" align="center">
                <button type="submit"  value="Envoyer">sign up </button>

                <button type="reset"  value="Annuler">Annuler</button>
            </td>
        </tr>
        </table>
     </form>
</body>
</html>

【讨论】：