Я создаю форму, которая при отправке отправляет мою форму в файл JSON, однако, когда я использовал JavaScript для отправки моих форм в свой JSON файл, я заметил, что проверки формы, такие как обязательные, и другие, не работают поэтому я хотел знать, чтобы иметь возможность отправлять свои данные на JSON, а также иметь проверки формы HTML. Может кто подскажет, как я могу это сделать?
const send = document.querySelector('.send-message');
send.addEventListener("click", async e => {
e.preventDefault();
var name = document.querySelector(".contactName").value;
var email = document.querySelector(".contactEmail").value;
var number = document.querySelector(".contactNumber").value;
var message = document.querySelector(".contactMessage").value;
const contact = {
name,
email,
number,
message
}
let response = await fetch('http://localhost:3000/contact',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(contact)
});
alert("Thanks for contacting Us");
});
.Contact-input_area label {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.Contact-input_area input,
.Contact-input_textarea textarea {
display: block;
width: 100%;
color: #000;
font-weight: 500;
font-size: 15px;
line-height: 1.5;
padding: 16px;
border: 1px solid#ced4da;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 24px;
transition: border-color 0.15s ease-in-out, box-shadow 0.5s ease-in-out;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
.Contact-input_area input:focus {
box-shadow: none;
border-color: #379cf4;
}
.Contact-input_textarea textarea:focus {
box-shadow: none;
border-color: #379cf4;
}
.send_message button {
background: #379cf4;
border: 2px solid #379cf4;
color: #fff;
width: 40%;
height: auto;
padding: 15px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: 0.9s;
}
.send_message button:hover {
background: transparent;
border: 2px solid #00baeb;
color: #00baeb;
border-radius: 15px;
}
<form name="Contact">
<p class="Contact-input_area">
<label for="name">Name</label>
<input
id="name"
name="name"
type="text"
placeholder="Your Name"
required
autocomplete="off"
autofocus=""
class="contactName"
/>
</p>
<p class="Contact-input_area">
<label for="email">Email</label>
<input
id="email"
name="email"
type="text"
placeholder="Your Email"
required
autocomplete="off"
class="contactEmail"
/>
</p>
<p class="Contact-input_area">
<label for="number">Phone Number</label>
<input
id="number"
name="number"
type="text"
placeholder="Your Phone"
required
autocomplete="off"
class="contactNumber"
/>
</p>
<p class="Contact-input_textarea">
<label for="message">Message</label>
<textarea
name="message"
id="message"
placeholder="Your Message"
cols="40"
rows="6"
required
autocomplete="off"
class="contactMessage"
></textarea>
</p>
<div class="send_message">
<button type="submit" class="send-message">Send Message</button>
</div>
</form>
Мой JSON Файл:
"contact": [
{
"id": 1,
"name": "a",
"email": "a@gmail.com",
"number": "0000000000",
"message": "Hello"
}]