Ng-click validation is not working

Question

I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.

<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="form-group">
          <label for="lname">First Name:</label>
          <input type="text" name="firstname"
            ng-model="FirstName" class="form-control custom-form-control"
            placeholder="First Name" required="required">
          <span class="text-danger"
            ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="form-group">
          <label for="lname">Last Name:</label>
          <input type="text" name="lastname"
            ng-model="LastName" class="form-control custom-form-control"
            placeholder="Last Name" required="required">
          <span class="text-danger"
            ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" name="email"
            ng-model="Email" class="form-control custom-form-control"
            ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
            placeholder="Email" required="required">
          <span class="text-danger"
            ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
          <span class="text-danger"
            ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
        </div>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="form-group">
          <label>Phone Number:</label>
          <div class="clearfix"></div>
          <input type="text" name="phone"
            ng-model="Phone" class="form-control custom-form-control"
            placeholder="XXXXXXXXXX" required="required">
          <span class="text-danger"
            ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="form-group">
          <label>Message:</label>
          <textarea class="form-control rounded-0" rows="5"
            name="comment" placeholder="Message"
            ng-model="Comment" required="required"></textarea>
          <span class="text-danger"
            ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="form-group">
          <label>Upload Resume:</label>
          <!--<input type="file" name="ResumePath"  id="filehandler" />-->
          <input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
          <!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
          <label for="file1" class="form-control">
            <span><i class="fa fa-file"></i>&nbsp;Drag file here or choose file</span>
          </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
            class="grecaptcha" ng-model="respone1"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <button type="button" id="btnSubmit"
          ng-click="uploadFiles()" value="Upload"
          class="btn btn-green center-block pull-left">
          <i class="fa fa-send"></i>{{btnText}}</button>
      </div>
    </div>
    <div class="form-group text-center">
      <h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
      <h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
    </div>
  </div>
</form>

cstricklan · Accepted Answer · 2018-01-29 14:08:51Z

1

ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.

I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.

<form name="teamForm" ng-submit="uploadFiles()" class="formfields">

then, for the button you would specify it is the submission button and remove the ng-click.

    <button type="submit" id="btnSubmit"
      value="Upload"
      class="btn btn-green center-block pull-left">
      <i class="fa fa-send"></i>{{btnText}}</button>

answered Jan 29, 2018 at 14:08

cstricklan

6615 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ng-click validation is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related