모든 필드가 JavaScript로 채워진 후 제출 방법

기본적으로 텍스트 상자와 제출 버튼이 포함 된 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; 
}

출처

2016-08-15 bill maxfith

완전한 코드를 표시하면 코드에 텍스트 상자가 없습니다. –

내 질문을 편집하여 전체 양식을 게시했습니다. –

제출 기능 또는 제출자 처리기는 어디에 있습니까? – happymacarts

양식 만있는 경우 제출 일반 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>

출처

2016-08-15 14:18:36

사용할 수 AngularJS와 : 여기

내 버튼 코드 양식이 유효 할 때까지 버튼 :

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

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/

출처

2016-08-15 14:02:27

모든 필드가 JavaScript로 채워진 후 제출 방법

답변

관련 문제