Question 324953 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I add form validation with js?

form.addEventListener('submit',(event)=>{
    event.preventDefault()
    const input=[nameinput,desc,number];
    if(nameinput.value.trim() && desc.value.trim() && number.value.trim()){
        let obj = {
            name: nameinput.value,
            desc: desc.value,
            price: number.value
        }
        axios.post("http://localhost:3000/Pulse", obj)
        .then(res => {
            window.location = "./index.html"
        })
    }
})

How can I add form validation with javascript? required.
To add form validation in JavaScript, you can check if the input values meet certain criteria before submitting the form. For example, you can check if the fields are not empty.

How can I add form validation with javascript? required.
To add form validation in JavaScript, you can check if the input values meet certain criteria before submitting the form. For example, you can check if the fields are not empty.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    let form = document.querySelector('form')
let nameinput = document.getElementById('name')
let desc = document.getElementById('desc')
let number = document.getElementById('number')
let submit = document.getElementById('submit')
let table = document.getElementById('table')

fetch(`http://localhost:3000/Pulse`)
    .then(res => res.json())
    .then(data => {
        data.forEach(element => {
            table.innerHTML += `
            <tr>
            <td>${element.id}</td>
            <td>${element.name}</td>
            <td>${element.desc}</td>
            <td>${element.price}</td>
            <td>
            <button onclick="remove(${element.id})">delete</button>
            </td>
             </tr>
            `
        });
    })
function remove(id){
    axios.delete(`http://localhost:3000/Pulse/${id}`)
}
form.addEventListener('submit',(event)=>{
    event.preventDefault()
    const input=[nameinput,desc,number];
    if(nameinput.value.trim() && desc.value.trim() && number.value.trim()){
        let obj = {
            name: nameinput.value,
            desc: desc.value,
            price: number.value
        }
        axios.post("http://localhost:3000/Pulse", obj)
        .then(res => {
            window.location = "./index.html"
        })
    }
})
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/scss/style.css">
</head>
<body>
    <section id="add">
        <div class="container">
            <div class="add">
                <form action="add" >
                    <label for="name">Name:</label>
                    <input type="text" name="" id="name" required>
                    <input type="text" name="" id="desc" required>
                    <input type="number" name="" id="number" required>
                    <input type="submit" name="" id="submit">
                </form>

                <table id="table">
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>description</th>
                        <th>price</th>
                        <th></th>
                    </tr>
                </table>
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="assets/js/add.js"></script>
</body>
</html>


  2. 0

    Your question isn’t well structured and I don’t understand what validation type you’re asking for, but if you want to check if the input fields meet your criteria you can simply add an ‘input’ event listener to your input field.

    That way, you can check if the field is valid on every user input.

    The code below checks if the user’s input is below a certain number of characters.

    const input_field = document.getElementById('yourId');
input_field.addEventListener('input', ()=>{
 if (input_field.value.length < 5) {
     console.log('too short')
  //show error message to the user
}
})
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="yourId">
</body>
</html>

    You can simply disable the submit button if input field criteria isn’t met.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search