Text input field "PLACEHOLDER" not appearing

Text input field "PLACEHOLDER" not appearing - javascript

I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.
I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app

can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.
Not sure why it wouldn't, perhaps share your code online.
Like this,
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
where we can inspect and debug it.
As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too

you have to replace form-floating by form-group
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img class="mb-4" src="../images/example.png" alt="" width="72" height="57" />
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>

Related

Input field "placeholder" not working/showing

I'm a newbie front-end dev, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input. I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app

As Phil said in the comment to your post the issue is that you're using Bootstrap Floating Labels (by wrapping your inputs with a .form-floating) but you're not supplying labels (yours are commented out).
<div class="form-floating">
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Alternatively you can remove the .form-floating surrounding div and use the placeholders as normal
<div>
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Here they are uncommented and working correctly: on codepen

Remove class form-floating from div tag it will work.

Client Side Form Validation not happening + can't edit form elements

I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}

I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:
$(document).ready(function() {
$("#reg-form").submit(function(e) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
console.log(true);
return true
} else {
e.preventDefault();
$error.text("Passwords don't match");
}
})
})
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
</div>

Why do my circular buttons break when going from Bootstrap 3 to Bootstrap 4?

I have the following fiddle:
https://jsfiddle.net/b3x6ou4k/
When I change the CSS link from Bootstrap 3 to Bootstrap 4 (using https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css as the CSS), the circle buttons change to square.
Why does the CSS for circular buttons:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
not work in Bootstrap 4 and how do I keep this style:
rather than this style:
when upgrading from 3 to 4?

You'll want to consult the migration docs, but this seems to approximate what you had before: https://jsfiddle.net/xrcu92bo/1/
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
1
<p><small>Shipper</small></p>
</div>
<div class="stepwizard-step col-xs-3">
2
<p><small>Destination</small></p>
</div>
<div class="stepwizard-step col-xs-3">
3
<p><small>Schedule</small></p>
</div>
<div class="stepwizard-step col-xs-3">
4
<p><small>Cargo</small></p>
</div>
</div>
</div>
<form role="form">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Shipper</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Destination</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Schedule</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Cargo</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-success pull-right" type="submit">Finish!</button>
</div>
</div>
</form>
</div>
Basically, .btn-default doesn't exist in Bootstrap 4; the closest you get is .btn-light. I also added the .border class, since the light button doesn't have a lot of contrast with your background.
Also, the disabled property doesn't actually do anything on an anchor tag - you'll want to use the disabled class if you want to prevent users from clicking on "disabled" steps.

AngularJS form refuses to validate on submission

My angular form refuses to validate on submit. I have multiple other forms set up similarly that work completely fine. It prevents submission if invalid, however, it does not show any error messages at all.
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
<div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div>
<div class="form-group">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
<span ng-show="signupForm.firstname.$error.required"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<span ng-show="signupForm.lastname.$error.required"></span>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<span ng-show="signupForm.username.$error.required"></span>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
<span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<span ng-show="signupForm.school.$error.required">Please select a school</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<span ng-show="signupForm.password.$error.required"></span>
</div>
<div class="form-group">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
<span ng-show="signupForm.password2.$error.required"></span>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
Any help is greatly appreciated.
Edit
This is code that is working:
<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
<div class="col-md-8 col col-xs-12">
<div class="buffer">
<div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
</div>
<div class="profile-container">
<h2 class="name-highlight">Hi, {{currentUser.firstName}} {{currentUser.lastname}}</h3>
<h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your profile</h2>
<form role="form" name="profileForm" ng-submit="profileForm.$valid && updateUser()" novalidate>
<label for="username">Username</label>
<input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.username.$touched">
<span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
</div>
<label for="email">Email</label>
<input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.email.$touched">
<span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
</div>
<label for="bio">Bio</label>
<textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
<input type="submit" class="btn btn-green btn-lg" value="Update Profile">
</form>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your password</h2>
<form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
<label for="oldpassword">Your old password</label>
<input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
<span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
</div>
<label for="newpassword">Your new password</label>
<input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
<span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
</div>
<label for="passwordagain">Your new password again</label>
<input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
<span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Change Password">
</form>
</div>
</div>
<div class="col-md-4 col-xs-12">
<h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
<div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
<div class="item-slider">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
<img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
</uib-slide>
</uib-carousel>
</div>
<div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
<div class="post-content">
<div class="top-info">
<span><div class="glyphicon glyphicon-user"> </div></span><span class="post-username">{{ post.firstname}} {{ post.lastname }}</span>
<br>
<span><div class="glyphicon glyphicon-tag"> </div></span><span class="post-username">{{ post.category}}</span>
</div>
<div class="wrap">
<h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
<p class="description">
{{post.content}}
</p>
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
</div>
</div>
</div>
</div>

Updated answer
NOTE: Angular validation works on name attribute
<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div> -->
<div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
<div ng-show="signupForm.email.$touched">
<span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
<div ng-show="signupForm.firstname.$touched">
<span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<div ng-show="signupForm.lastname.$touched">
<span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<div ng-show="signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
</div>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
<span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
<span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
</div>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<div ng-show="signupForm.password.$touched">
<span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
<div ng-show="signupForm.password2.$touched">
<span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
</div>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
<!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
</body>
</html>

Angular validations work on the name attribute so try adding name instead of id to the input elements inside your form

jQuery Effect causes button to not be enclosed by div

When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});

It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;

Develop Reference

JavaScript is the programming language of the Web.

Text input field "PLACEHOLDER" not appearing - javascript

Related

Input field "placeholder" not working/showing

Client Side Form Validation not happening + can't edit form elements

Why do my circular buttons break when going from Bootstrap 3 to Bootstrap 4?

AngularJS form refuses to validate on submission

jQuery Effect causes button to not be enclosed by div

Categories

Resources