Test Form

by nukeboy212

HTML

<form name="form" method="post" netlify id="form"  onsubmit="return validate(event)" >
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="E-mail"><br>
<input type="number" name="mobNumber" placeholder="Contact Number"><br>
<textarea name="query" placeholder="Your Query" rows="5"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

CSS

.redPlaceholder::placeholder {
    color: red;
    font-style: italic;
    font-family: 'Roboto' sans-serif;
}

JavaScript

function validate(e) {


    let arr = [];
    arr[0] = form.name ;
    arr[1] = form.mobNumber ;
    arr[2] = form.email ;
    arr[3] = form.query ;
    for (let num = 0; num < arr.length; num++){
        if (arr[num].value == ""){
        arr[num].placeholder = "This field is mandatory";
        arr[num].style.backgroundColor = "rgba(0, 0, 255, 0.1)";
        arr[num].classList.add('redPlaceholder');
                e.preventDefault()

        }
        else{
         arr[num].style.backgroundColor = "transparent";
        }
    }

    console.log(arr[1] + "test")
}