current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I am new to Angular JS. I have created a form which is having a terms & agreement checkbox at the bottom. My requirement is when the user clicks the submit button without checking the checkbox, a div containing the error message should be displayed.

Currently the checkbox if not selected just appears RED as its a required field. How can i bind the submit functionality on ng-click with the checkbox check and ng-show a div.

My HTML looks like this -

    <p class="note">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="checkBoxText">
    <span class="mandatory">*</span>I agree to the Terms & conditions</span>
    </p>
    <div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div>

    <div style="float:right" class="buttonSimple">
        <a name="Register" id="RegisterUser" href="#" class="" ng:click="submitform(true)"><span>Registrieren</span></a>
    </div>
share|improve this question
    
Have you tried anything? – Hüseyin BABAL Jan 22 '14 at 6:40
    
Yes, I tried giving the div containing error message the attribute ng-show="_ServerForm.termsagreement.$error.required", but again this results in the error message to appear all the time and only disappears when i click on the checkbox. But my requirement is the message should only appear on click of the submit button. I am not sure how to overwrite the REQUIRED directive to control on submit button click – Achyut Jan 22 '14 at 6:53
    
Could you please put this html to your question? – Hüseyin BABAL Jan 22 '14 at 8:01
    
I have updated the question with the HTML – Achyut Jan 22 '14 at 8:12

1 Answer 1

up vote 2 down vote accepted

A possible solution to this is:-

1.) In the function

submitform()

you should set some random variable name to true. Say

$scope.buttonClicked=true;

2.) In the HTML code,

Change 

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div>

to

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">Please select the Checkbox before submit</div>

The buttonClicked variable will be set in the scope only after the button is clicked and the function is called. And your message's ng-show will not display until buttonClicked is set.

I believe this answers your question.

share|improve this answer
    
This worked like charm. #saraj – Achyut Jan 22 '14 at 8:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.