CODEWITHSUNDEEP
angularjsrequiredfieldvalidator
user_dev
user_dev

Reputation: 1431

How to disable submit button untill all the fields are filled in a form?

I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:

<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>

    <fieldset class="group">

        <div class="field-group">
            <label class="label">Product Name</label>
            <input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
            <p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
            <div class="error"></div>
            <span class="result_product" style="color: #880000"></span>
        </div>

        <div class="field-group">
            <input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
            <p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
            <label class="label">Who are end users</label>
            <div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
        </div>


        <div class="field-group">
            <label for="licenseKey">What Problem Are They Facing Today</label>
            <textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
            <p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
            <div class="description">Spend So much in .....</div>
        </div>


        <div class="field-group">

            <label class="label">What kind of product is this</label>
            <input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
            <p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
            <div class="description">[Software, MobileApp, JIRA-Plugin]</div>
        </div>


        <div class="field-group">
            <label for="d-lname">How do you plan to solve the problem</label>
            <input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
            <p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
            <div class="error"></div>
            <div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
        </div>


        <div class="field-group">
            <label for="d-lname">Who are your competitors</label>
            <input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
            <p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
            <div class="error"></div>
            <div class="description">Traditional Commuting Solution</div>
        </div>

        <div class="field-group">
            <label for="d-lname">How do you differntiate from your competitors</label>
            <input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
            <p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
            <div class="error"></div>
            <div class="description">[Automated, Secure]</div>
        </div>

    </fieldset>

        <div class="buttons-container">
            <div class="buttons">

                <button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
                         id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
                <button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
            </div>
        </div>
</form>

How can I make sure that submit button is disabled untill all the fields are filled. I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.

Upvotes: 0

Views: 8013

Answers (1)

devqon
devqon

Reputation: 13997

You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):

<form name="newDiscoveryForm">
    <input type="text" name="someName"
           ng-model="someModel" 
           ng-required="true" /> <!-- use ng-required -->
    <!-- other inputs -->

    <!-- $invalid will evaluate to true if the `ng-required` are not valid -->
    <button type="submit" 
            ng-disabled="newDiscoveryForm.$invalid">
        Submit!
    </button>
</form>

See this JSFIDDLE

Upvotes: 3

Related Questions