Question

我需要创建一个名为footer.js的脚本来验证下面的表单。我无法在index.html文件中进行任何修改。

我需要验证name字段是空格为3个字符，age字段是1到110之间的数字。所有字段都需要。

我该怎么做？如何调用footer.js文件？甚至没有onsubmit函数，只有<form action="#">。

<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="js/footer.js"></script>

<form action="#">
    <fieldset>
        <legend>Contact</legend>
        <div class="textinput">
            <label for="name">Name</label>
            <input type="text" name="name">
        </div>

        <div class="textinput">
            <label for="name">Age</label>
            <input type="text" name="age>
        </div>

        <div class="radioSelection">
            <label>Select one</label>            
            <input type="radio" name="favorit" id="html" value="html">
            <label for="html">HTML</label>
            <input type="radio" name="favorit" id="js" value="js">
            <label for="js">JavaScript</label>
            <input type="radio" name="favorit" id="css" value="css">
            <label for="css">CSS</label>
        </div>

        <div class="textareainput">
            <label for="info">About you:</label>
            <textarea></textarea>
        </div>

        <div class="action">
            <button>Send</button>
        </div>
    </fieldset>
</form>

Answer 1

因此，您不是在HTML文件中编写JavaScript事件，最好让JS文件处理这些事件。这是您项目的目的。您的文件正在运行，您只需要为提交添加事件处理程序。该文件将具有以下结构：

$(document).ready(function(){ // Wait for the DOM to load
    $("form").submit(function(e){ // When a form is submitted
        e.preventDefault(); // Prevent normal submit
        /* Validation Here */
    });
});

Answer 2

_{将评论转换为答案}

查找不引人注目的jquery。你有js文件中的所有方法。

从

开始

$(function() { 
  $("form").on("submit",function() { 
   // validations here
  }); 
});

如果您不想提交表单，则需要停止提交

$(function() { 
  $("form").on("submit",function(e) {
   e.preventDefault(); // cancels the form submit 
   // validations here
  }); 
});

jQuery的替代方案是普通的JS - 它仍然在footer.js中幸福地生活，并在页面加载时执行

window.onload=function() {
  document.forms[0].onsubmit=function() {
  // validation here
  return false; // cancels the form submission
  }
}

Answer 3

在footer.js文件中，您可以查找表单元素，并通过将其附加到onsubmit事件来运行函数。

您可以通过从文档对象模型（DOM）中搜索表单元素来执行此操作。谷歌

使用javascript
查找元素

这应该指向正确的方向。

我看到您发布的代码段使用的是jquery，这使我上面描述的内容变得更加容易。为此我会谷歌

jquery find form element

获取正确的语法。

没有功能调用javascript？

3 个答案: