2016-08-15 35 views
0

基本上我有一个HTML表单,其中包含一个文本框和一个提交按钮,我想要的是当我按提交按钮时,它应该检查文本框,它没有错误然后继续提交。如何提交所有字段后填写JavaScript

这里是我的按钮代码:

<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; 
} 
+0

显示您的完整代码,您的代码没有文本框。你调用一个不存在的提交函数 –

+0

我编辑了我的问题并发布了完整的表格 –

+0

你的提交函数或提交处理程序在哪里? – happymacarts

回答

0

这里的一个普通的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> 
0

您可以使用AngularJS:

角让你得到你的表格状态:$无效/ $有效

下面的代码将禁用按钮直到表格生效:

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

请参阅fo llowing例如:

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> 

控制器:

function FormController($scope){ 

    $scope.invalid = "Invalid"; 

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

}; 

工作实施例:https://jsfiddle.net/pqz3hsac/22/

相关问题