填写完所有字段后如何提交JavaScript

Question

Basically I have a HTML form that contains a textbox and a submit button, what I want is when I pressed submit button it should check for the textbox that it have no error then proceed with submission. 基本上我有一个HTML表单，其中包含一个文本框和一个提交按钮，我想要的是当我按下“提交”按钮时，它应该检查文本框是否没有错误，然后继续提交。

Here is my button code: 这是我的按钮代码：

 <form id="thisform">
 <div id="Registeration" class="Registeration">
            <input type="text" id="textbox" class="textbox"
            placeholder="My textbox" name="fBox" maxlength="30"/>
        </div>

<div class="Registration_Submit_Div">
    <input type="submit" value="submitform" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" onclick="submit()"/>
</div></form>

function(){
    alert('hello');
    return false;
}

Answer 1

you can use AngularJS: 您可以使用AngularJS：

Angular allow you to get status about your form: $invalid/$valid Angular允许您获取有关表单的状态：$ invalid / $ valid

the following code will disable the button until the form will be valid: 以下代码将禁用该按钮，直到表单有效为止：

<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">

please see the following example: 请参见以下示例：

HTML: HTML：

<div ng-app>
<form ng-controller="FormController" name="myForm">
   <div class="header padding-b--10">Form Area</div>
        <div class="padding-b--10">
            <input name="empId" placeholder="Employee ID" ng-model="data.empId"
                   style="padding:5px" required/> 
            <span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
        </div>
        <div class="padding-b--10">
            <input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
                   style="padding:5px" required/>
            <span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
        </div>
        <input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">

</form>

Controller: 控制器：

    function FormController($scope){

    $scope.invalid = "Invalid";

    $scope.submit = function(){
        console.log($scope.data);
    }

};

Working Example: https://jsfiddle.net/pqz3hsac/22/ 工作示例： https : //jsfiddle.net/pqz3hsac/22/

Answer 2

Here's a plain JS example where the form is only submitted if the text is at least 5 characters long. 这是一个普通的JS示例，其中仅当文本长度至少为5个字符时才提交表单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <form method="POST" action="result.html" class="da-form">
    <input type="text" name="textbox" class="textbox">
    <input type="submit" class="submit">
  </form>

  <script>

    var formEl = document.querySelector('.da-form');
    var submitBtn = document.querySelector('.da-form .submit');
    var textEl = document.querySelector('.textbox');

    submitBtn.addEventListener('click', function(event) {
      event.preventDefault();
      if (textEl.value.length >= 5) {
        formEl.submit();
      } else {
        console.error('text should be at least 5 chars long');
      }
      console.log();
    });

  </script>

</body>
</html>

填写完所有字段后如何提交JavaScript

问题描述

2 个解决方案

解决方案1
0 2016-08-15 14:02:27

解决方案2
0 已采纳 2016-08-15 14:18:36

填写完所有字段后如何提交JavaScript

问题描述

2 个解决方案

解决方案1 0 2016-08-15 14:02:27

解决方案2 0 已采纳 2016-08-15 14:18:36

解决方案1
0 2016-08-15 14:02:27

解决方案2
0 已采纳 2016-08-15 14:18:36