SUCCESS AND FAILURE TEXT
WHEN THE DATA IS ENTERED INTO THE FIELDS THEY ARE VALIDATED IF THEY ARE IN THE CORRECT FORMAT OR WITHIN THE CONSTRAINTS.
THERE ARE 2 CLASSES
VALID-FEEDBACK AND INVALID-FEEDBACK
NEW.EJS
<%- layout("/layouts/boilerplate") %>
<body>
<div class="row offset-2">
<div class="col-8">
<br /><br />
<h2>Add new listing</h2>
<form
method="POST"
action="/listings"
class="needs-validation"
novalidate
>
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input
name="listing[title]"
type="text"
placeholder="Enter title"
class="form-control"
required
/>
<div class="valid-feedback">Title is Valid!</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label
><textarea
name="listing[description]"
type="text"
placeholder="write description"
class="form-control"
required
></textarea>
<div class="invalid-feedback">Invalid data</div>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image Link</label>
<input
name="listing[image]"
type="text"
placeholder="paste image URL/link"
class="form-control"
/>
</div>
<div class="row">
<div class="mb-3 col-md-4">
<label for="price" class="form-label">Price</label>
<input
name="listing[price]"
type="number"
placeholder="enter price"
class="form-control"
required
/>
<div class="invalid-feedback">Invalid Price</div>
</div>
<div class="mb-3 col-md-8">
<label for="location" class="form-label">Location</label>
<input
name="listing[location]"
type="text"
placeholder="enter location"
class="form-control"
required
/>
<div class="valid-feedback">Location is Perfect!</div>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label">Country</label>
<input
name="listing[country]"
type="text"
placeholder="enter country"
class="form-control"
required
/>
<div class="invalid-feedback">Enter a Valid country</div>
</div>
<br /><br />
<button class="btn btn-dark add-btn">ADD</button>
<br /><br />
</form>
</div>
</div>
</body>
IN EDIT.EJS
<%- layout("/layouts/boilerplate") %>
<div class="row mt-3">
<div class="col-8 offset-2">
<h3>EDIT listing</h3>
<form
method="POST"
action="/listings/<%=listing._id%>?_method=put"
novalidate
class="needs-validation"
>
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input
name="listing[title]"
type="text"
value="<%=listing.title%>"
class="form-control"
required
/>
<div class="valid-feedback">Title looks Good!</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Descriptioin</label>
<textarea
name="listing[description]"
type="text"
class="form-control"
required
>
<%=listing.description%>
</textarea
>
<div class="valid-feedback">valid Data!</div>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<input
name="listing[image]"
type="text"
value="<%=listing.image%>"
class="form-control"
required
/>
<div class="invalid-feedback">Enter correct URL</div>
</div>
<div class="row">
<div class="mb-3 col-md-4">
<label for="price" class="form-label">Price</label>
<input
name="listing[price]"
type="number"
value="<%=listing.price%>"
class="form-control"
required
/>
<div class="invalid-feedback">Invalid Price</div>
</div>
<div class="mb-3 col-md-8">
<label for="location" class="form-label">Location</label>
<input
name="listing[location]"
type="text"
value="<%=listing.location%>"
class="form-control"
required
/>
<div class="valid-feedback">Perfect!!</div>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label">Country</label>
<input
name="listing[country]"
type="text"
value="<%=listing.country%>"
class="form-control"
required
/>
<div class="invalid-feedback">Enter a valid country</div>
</div>
<button class="btn btn-dark edit-btn">save</button>
</form>
</div>
</div>
Comments
Post a Comment