empty form field is still being submitted when using angular form validation

Question

The validation is being highlighted correctly, but when I click submit button, even with empty form field, the form is still being submitted (and nick value is undefined)

I tried adding novalidate to the form -- but that didn't help.

    <form class="nick" ng-submit="joinChat()">
        <input type="text" required name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
        <button>Join</button>
    </form>

I'm trying to follow this guide here: http://www.ng-newsletter.com/posts/validations.html

The joinChat() function doesn't do any validation itself. As its my understanding this shouldn't be necessary when using Angular form validation.

    $scope.joinChat = function(){
        socket.emit('chat:join', { nick: $scope.nick });
    };

Hii.. If i give action=" " in the form, angularjs validation is not working.. Do u know any solution for this ?? — phpfresher
– phpfresher, Commented Apr 17, 2015 at 7:33
Hii @chovy... thnx for ur answer... but i've a new problem again... its working fine if i remove action=" " but the form is not being submitted... what's the problem ??? — phpfresher
– phpfresher, Commented Apr 21, 2015 at 12:01

karaxuna · Accepted Answer · 2013-12-13 07:37:01Z

3

Invalid input does not prevent angular form submission, instead try this:

<form class="nick" novalidate ng-submit="joinChat()" name="myform">
    <input type="text" ng-required="true" name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
    <button ng-disabled="myform.$invalid">Join</button>
</form>

Fiddle

edited Dec 13, 2013 at 7:37

answered Dec 13, 2013 at 6:56

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

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

9 Comments

chovy Over a year ago

what does novalidate on the form do?

karaxuna Over a year ago

it prevents default browser validation and lets angular handle validation

chovy Over a year ago

ok, also i had <input name=nick ng-model=user.nick> but I get [Object object] as the value. I changed name to user.nick but I don't know if that's right or if its even needed.

karaxuna Over a year ago

make fiddle please and i'll take a look at it

chovy Over a year ago

jsfiddle.net/chovy/hfS4e -- i just don't know what name attribute on the input field should be.

|

Collectives™ on Stack Overflow

empty form field is still being submitted when using angular form validation

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related