CODEWITHSUNDEEP
angularjs
Mujtaba Hussain Bhat
Mujtaba Hussain Bhat

Reputation: 67

Trying to validate the form in angular js

i was trying to validate fields of a form in angularjs but it shows the error-message with out clicking the button. i can't figure out what is the problem in my code. when i click on button i will display the error message but the problem is its shows error message on page load

My code is

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

Upvotes: 1

Views: 103

Answers (1)

Aparigraha
Aparigraha

Reputation: 177

My initial observation is you are using both ng-submit and ng-click to submit the form details which results in duplicate submission of same form causing this issue. try to use one of them and it should work fine. below is the warning from angularjs team

Warning: Be careful not to cause "double-submission" by using both the ngClick and ngSubmit handlers together. See the form directive documentation for a detailed discussion of when ngSubmit may be triggered.

Here is the link to the documentation for your reference submitting-a-form-and-preventing-the-default-action

Hope it helps:)

Upvotes: 1

Related Questions