2

I have a small issue with a required field in a body of a bootstrap modal, ideally i want to validate the field before submitting but for some reason required is working , Can you please have a look 

    <body>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="$dismiss()" >
            <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title"><b>Additional Information:</b> ( This info will be added to all incident selected )</h5>
    </div>


    <div class="modal-body">
        <p>Additional Comments :</p>
        <form name="modalForm">
            <div class="form-group">
                <textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
            </div>
        </form>
    </div>


    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
        <button type="button" class="btn btn-primary" ng-click="$close()" >Create</button>
    </div>

</body>

Thanks

Mero
  • 622
  • 12
  • 24
  • Just for reassurance.. is this **exactly** how your HTML looks in your view? Because if `` is beneath ` – Grizzly Feb 09 '17 at 16:10
  • that's not the case it's in the same line there's no space , i think that happened when i was editing to post here – Mero Feb 09 '17 at 16:18
  • What version of IE are you using? – Grizzly Feb 09 '17 at 16:20
  • Are you trying to validate on button click? If so, you have to include the button element inside the form tags – Grizzly Feb 09 '17 at 16:22
  • i tried in chrome and Firefox not working that's the main thing for me for now , am validating on button click but i want the buttons to be in the modal footer if am understanding you right . – Mero Feb 09 '17 at 16:27
  • Why can't you put the `modal footer` div inside the form tag? – Grizzly Feb 09 '17 at 16:28
  • am not an expert a html expert but the
    tag is starting at modal-body
    should i close it inside modal-footer
    ? is that what you mean ?
     – Mero Feb 09 '17 at 16:35

2 Answers2

1

Change your submit button from type="button" to type="submit". required attribute only works when there's a submit event listener. Check out: Form inputs in modal not showing as required

nullptr
  • 127
  • 9
0

Try including the buttons inside the form tag:

<div class="modal-body">
    <p>Additional Comments :</p>
    <form name="modalForm">
        <div class="form-group">
            <textarea class="form-control" rows="2" cols="68" id="comment" placeholder="Additional parent Info" required></textarea>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
            <input type="submit" class="btn btn-primary" ng-click="$close()" ng-disabled="inputForm.$invalid" value="Create" />
        </div>
    </form>
</div>

Let me know if this helps

Grizzly
  • 5,873
  • 8
  • 56
  • 109