1. 首頁
  2. 問答
  3. 試圖驗證窗體角js

試圖驗證窗體角js

2017-04-03 27 views
1

我試圖驗證angularjs中的窗體的字段，但它顯示錯誤消息與出單擊按鈕。我無法弄清楚我的代碼中有什麼問題。當我點擊鏈接我將顯示錯誤消息，但問題是在頁面加載它顯示錯誤消息試圖驗證窗體角js

我的代碼是

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Layout</title> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/mediaStyle.css"> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(document).on("click", ".square-radio", function() { 
     $(this).toggleClass("square-radio--clicked"); 
    }); 
}); 
</script> 
</head> 
<body ng-app="myApp"> 

<div class="container"> 
    <header id="logoHeader"> 
     <h1>Logo</h1><span class="fa fa-times" aria-hidden="true"></span> 
    </header> 
    <div class="emailSupportPanel"> 
     <div class="mainContainer"> 
      <h1 class="panel-contentHeader">UK & Ireland Email Support</h1> 
      <p>Step1:Tell us your issue > Step2: Tell us your issue<span> > Step3:Tell us your issue</span></p> 
     </div> 
    </div> 
    <div class="mainContainer"> 
     <h4 class="imaportantNote">Feilds marked with an astrick <span class="fa fa-asterisk" aria-hidden="true star-icon"></span> are required</h4> 
     <form name ="myform" ng-submit="sumsung-form.$valid" novalidate ng-init="disabled=false"> 
     <div class="form-container mb15" ng-class="{true: 'error'}[submitted && sumsung-form.userSubject.$invalid]"> 
      <label class="form-label">Subject <span class="fa fa-asterisk" aria-hidden="true star-icon"></span></label> 
      <input type="text" class="form-input" name="userSubject" 
        ng-model="userSubject" id="subject" ng-required="!disabled" ng-disabled="disabled" 
        ng-required="true" 
        placeholder="Enter Subject" ng-class="{error: showMsgs && myform.name.$error.required}"> 
      <p ng-show="showMsgs && myform.name.$error.required">This field is required</p> 
      <!-- <div ng-messages="sumsung-form.userSubject.$error" 
      ng-show="sumsung-form.userSubject.$touched || sumsung-form.$submitted"> 
       <div ng-message="required" class="state-error"><i class="fa fa-exclamation-circle" aria-hidden="true" ng-show="submitted"></i>This field is required</div> 
      </div>--> 
     </div> 
     <div class="form-container"> 
      <label class="form-label" ng-class="{ 'state-error': sumsung-form.message.$invalid && (sumsung-form.message.$touched || sumsung-form.$submitted)}">Message <span class="fa fa-asterisk" aria-hidden="true star-icon"></span></label> 
      <textarea class="form-input" name="userMessage" ng-model="message" rows="5" 
         id="message" style="border-radius:0;" 
         ng-required="true" 
         placeholder="Enter Message"></textarea> 
     <!-- <div ng-messages="sumsung-form.userMessage.$error" 
       ng-show="sumsung-form.userMessage.$touched || sumsung-form.$submitted"> 
       <div ng-message="required" class="state-error"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>This field is required</div> 
       <div ng-message="minlength" class="state-error">Message must be over 100 characters</div> 
       <div ng-message="maxlength" class="state-error">Message must not exceed 1000 characters</div> 
      </div>--> 
      <!-- <p class="error-message">Please enter more then 50 charcters.</p>--> 
     </div> 

     <div class="footer"> 
      <button type="submit" ng-click="send('myform')" class="btn">SEND</button> 
     </div> 
     </form> 
</div> 

</body> 
</html>

JS：

var myApp = angular.module('myApp', ['ngMessages']); 
myApp.controller("myController",function($scope){ 
    $scope.name=undefined; 
    $scope.showMsgs = false; 
    $scope.send = function(){ 
     if ($scope[form].$valid) { 
      $scope.showMsgs = false; 
     } else { 
      $scope.showMsgs = true; 
     } 

    } 
});

css：

body{ 
     font-size:12px; 
     color:#333; 
     font-family: 'Raleway', sans-serif; 
     margin:0; 
     padding: 0; 
    } 
    .mb15{ 
     margin-bottom: 15px; 
    } 
    .container{ 
     position: relative; 
     width: 100%; 

    } 

    #logoHeader{ 
     width: 100%; 
     height:70px; 
     line-height: 70px; 
     max-height: 70px; 
     border-bottom: 1px solid #eee; 
     text-align: center; 

    } 
    #logoHeader>h1{ 
     margin: 0 !important; 
     color: #1428A0; 
    } 
    #logoHeader>span{ 
     display: inline; 
     position: relative; 
     right: -45%; 
     top: -60px; 
     font-size: x-large; 
     color: #ccc; 
    } 
    .emailSupportPanel{ 
     position: relative; 
     width: 100%; 
     height: 80px; 
     padding: 12px 0; 
     background: rgba(238, 238, 238, 0.5); 
     box-sizing: border-box; 
    } 
    .panel-contentHeader{ 
     margin: 0; 
     font-weight: bold; 
    } 
    .panel-contentHeader ~p>span{ 
     color:#1428A0; 
    } 
    .mainContainer{ 
     position: relative; 
     margin: 0 auto; 
     max-width: 80%; 
    } 
    .mainContainer .imaportantNote{ 
     font-weight: bolder; 
     font-size: 15px; 
     color:#777; 
    } 
    .fa-asterisk:before { 
     color: red; 
     font-size: 8px; 
     vertical-align: super; 
    } 
    .form-container{ 
     width: 100%; 
     height:auto; 
     padding-bottom: 12px; 
    } 
    .form-label{ 
     font-weight: bold; 
     margin-bottom: 10px; 
     font-size: 15px; 
     display: block; 
     color:#000; 
    } 
    .form-input{ 
     display: block; 
     width: 96%; 
     height: 32px; 
     padding: 6px 12px; 
     font-size: 14px; 
     line-height: 1.42857143; 
     color: #555; 
     background-color: #fff; 
     background-image: none; 
     border: 1px solid #ccc; 
     border-radius: 0; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
     -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
     -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
    } 
    textarea.form-input{ 
     height: auto; 
    } 
    .error-message{ 
     display: none; 
     width: 96.8%; 
     margin-top: 0px; 
     background-color: red; 
     color: #fff; 
     padding: 8px; 
    } 
    .information-form{ 
     width: 100%; 
     padding-top: 15px; 
     position: relative; 
     /* height: calc(100vh - 540px); */ 
     min-height: 344px; 

    } 
    .information-form>h3{ 
     font-weight: bolder; 
    } 
    .left-info,.right-info{ 
     width: 50%; 
     padding-top: 14px; 
     box-sizing: border-box; 
     float: left; 
     padding-right: 33px; 
     position: relative; 

    } 
    .privacy-container{ 
     width: 100%; 
     height:auto; 
     position: relative; 
    } 
    .square-radio { 
     border: 1px solid black; 
     margin: 2px; 
     width: 20px; 
     height: 20px; 
     position: relative; 

    } 
    .square-radio--clicked .square-radio--content{ 
     margin: auto; 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     background-color: black; 
     width: 16px; 
     height: 16px; 
    } 
    .square-radio--clicked ~.privacy-text,.square-radio ~.privacy-text{ 
     display: inline-block; 
     width: 100%; 
     margin-left: 39px; 
     font-size: 14px; 
     position: relative; 
     top: -21px; 
     color:#000; 
     font-weight: bold; 
    } 
    .privacy-text a{ 
     text-decoration: none; 
     color: #1428A0; 
    } 
    .product-info{ 
     position: relative; 
     width: 100%; 
     padding-top: 20px; 
     box-sizing: border-box; 
    } 
    .confirmation-part{ 
     width:48%; 
     display: inline-block; 
    } 

    .captcha-box{ 
     width: 100px; 
     height: 45px; 
     border: 1px solid #333; 
     display: inline-block; 
     position: relative; 
     top: -39px; 
     left: 20px; 
     margin-right: 19px; 
     text-align: center; 

    } 
    .captcha-box.cross-box{ 
     width: 50px; 
     height: 50px; 
     text-align: center; 
    } 
    .captcha-box .img-cross-icon{ 
     font-size: xx-large; 
     padding: 7px; 
    } 
    .captcha-box h2{ 
     color: blue; 
     margin-top: 11px; 
     letter-spacing: 4px; 
     font-weight: bolder; 
    } 
    .footer{ 
     width:100%; 
     position: relative; 
     min-height: 100px; 
     text-align: center; 
     padding-top: 20px; 
    } 
    .btn{ 
     padding: 12px 38px; 
     border-radius: 45px; 
     background-color: #1428A0; 
     color:#fff; 
    } 
    hr{ 
     border-color: rgba(204, 204, 204, 0.18); 
    } 
    p{ 
     color:#777; 
    } 
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
     color: #bbb; 
     padding: 5px; 
    } 
    .error { 
     border-color: red; 
     color:red; 
    }

來源

2017-04-03 Mujtaba Hussain Bhat

+0

您可以編輯這只是提供相關的代碼塊？ – Sajal

+0

忽略css @ sajalS –

回答

1

我最初的觀察是你同時使用NG提交和NG單擊提交表單的細節，導致重複提交同一形式的導致此問題。嘗試使用其中之一，它應該工作正常。以下是來自angularjs團隊的警告：

警告：小心不要因使用ngClick和ngSubmit處理程序一起導致「雙重提交」。有關ngSubmit何時可能觸發的詳細討論，請參閱表單指示文檔。

這裏是鏈接到的文檔，供大家參考submitting-a-form-and-preventing-the-default-action

希望它能幫助:)

來源

2017-04-03 11:42:25 mitrabrihas

+0

這是更新後的代碼，請告訴我代碼中出現了什麼問題https://jsfiddle.net/87hjfs9n/1/ @mitrabrihas –

+0

https://jsfiddle.net/87hjfs9n/3/這是更新後的代碼 –

+0

問題是您試圖訪問的形式在控制器的方式。 – mitrabrihas

相關問題

 相關問題