3

I am using a validation plug-in based on jQuery validation in my AngularJS app (which is built on top of a jQuery library).

The category input (search field) is required. But if I fill it with text and don't select a matching search I can still submit it because there is text in the search field. How can I make it invalid if no option is selected?

Plunkr:

http://plnkr.co/edit/ZYP58GxITghkTqE7PNHy

HTML (help.html)

<div class="form-group">
        <label for="category">Category "{{formData.category}}"</label>
          <input class="form-control" type="text" name="category" id="category" placeholder="Search..." ng-model="formData.category" typeahead="obj.name for obj in getCdOnCat($viewValue)" typeahead-editable="false" typeahead-loading="loadingLocations" required>
    </div>

JS (script.js) - HelpController

//Typeahead: Category Search
    $scope.getCdOnCat = function (searchVal) {
        return dataFactory.getCdOnCategory(searchVal).then(function (response) {
            return response.data.categories;
        }, function (error) {
            console.log('Error: dataFactory.getCdOnCategory');
        });
    };

    $scope.$watch('formData.category', function (value) {
        if (value === "No matching categories") {
            $scope.formData.category = "";
        }
    });
peta
  • 139
  • 3
  • 18
  • possible duplicate of [Set input invalid when typeahead-editable is false](http://stackoverflow.com/questions/18128793/set-input-invalid-when-typeahead-editable-is-false) – Maxim Shoustin Nov 08 '14 at 20:17
  • the same issue: http://plnkr.co/edit/iQM45S?p=preview; discussion: https://github.com/angular-ui/bootstrap/issues/2308 – Maxim Shoustin Nov 08 '14 at 20:17
  • @MaximShoustin Thanks! None of the threads provide a solution though? – peta Nov 09 '14 at 12:15
  • This bug has actually been fixed as of 2016, see plunker: http://plnkr.co/edit/NtGXL7uPLYKCHESnZyxs?p=preview – Rosdi Kasim Jan 15 '16 at 18:28

1 Answers1

0

You can add ng-disabled directive to your Submit input

<div class="form-actions">
  <input type="submit" value="Send" class="btn btn-primary btn-submit" ng-disabled="contactForm.$invalid">
</div>

Please see here working demo:

http://plnkr.co/edit/GoOiNmyQ1LSvWvtkqumF?p=preview

sylwester
  • 16,498
  • 1
  • 25
  • 33