Tyler Grim Tyler Grim - 1 month ago 5
CSS Question

Why do the warning and success messages not show up in this code

I am trying to use angular js to validate an email form. However, the "spans" do not show up when invalid or valid. why? if i take the ng-app = "" out of the body tag then they both show up all the time regardless of whether the form is valid or not.

<!DOCTYPE HTML>
<html lang = "en">
<meta charset = "utf-8">
<head>

<title>Email Us</title>

<link rel = "stylesheet" href = "../style/style.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "../js/callmail.js"></script>

</head>

<body ng-app = "">

<form name = "contact">

<label for = "subject" class = "control-label">Subject:</label>
<input id = "subject" ng-model = "subject" required/>
<span class = "warning" ng-show="contact.subject.$touched && contact.subject.$invalid">You Must Enter a subject!</span>
<span class = "success" ng-show="contact.subject.$touched && contact.subject.$valid">Valid!</span>

<br/>

<label for = "body" class = "control-label">Body:</label>
<input id = "body" ng-model = "body" required/>
<span class = "warning" ng-show="contact.body.$touched && contact.body.$invalid">Your email must have a body!</span>
<span class = "success" ng-show="contact.body.$touched && contact.body.$valid">Valid!</span>

<br/>

<label for = "signature" class = "control-label">Return Email:</label>
<input id = "signature" ng-model = "signature" type = "email" required/>
<span class = "warning" ng-show="contact.signature.$touched && contact.signature.$invalid">You must enter a valid return email!</span>
<span class = "success" ng-show="contact.signature.$touched && contact.signature.$valid">Valid!</span>

<br/>

<button ng-disabled = "contact.$invalid" id = "sendmail" type = "submit" class = "btn btn-success">Submit</button>

</form>

</body>
</html>

Answer

Give name property to each input element and use that name property instead of the id property to check the span tags.

Change this:

<input id = "subject" ng-model = "subject" required/>

to this:

<input id = "subject" name = "subject" ng-model = "subject" required/>