CODEWITHSUNDEEP
javascripthtmlcss
susheel bharadwaj
susheel bharadwaj

Reputation: 13

form gets submitted with empty values

I am using a form in my website and the user should get an error alert if a blank form is submitted.

I have used the below HTML & JS for converting the form data to JSON & submitting it to an email API. But the form gets submitted even for the blank values which should not happen.

Kindly help me out with the issue. TIA.

<form name="ff" id="ff">
  <label style="font-family: sans-serif;"></label> Name*:
  <input type="text" placeholder="Please enter your name" name="name" id="name" required />

  <label style="font-family: sans-serif;">
    Email*:
    <input type="email" placeholder="Enter your Email ID" name="email" id="email" required />
  </label>

  <label style="font-family: sans-serif;">
    Mobile Number *:
    <input type="text" placeholder="Enter Your Number" name="mobile" id="mobile" maxlength="10" required />
  </label>

  </label>
  <label style="font-family: sans-serif;">
    Message*:
    <textarea name="message" id="message" cols="500" placeholder="Message" required></textarea>
  </label>

  <input id="contactbtn" class="sendButton" type="submit" name="Submit" value="Send" />
</form>

function getFormData($form) {
  var unindexed_array = $form.serializeArray();
  var indexed_array = {};
  $.map(unindexed_array, function (n, i) {
    indexed_array[n['name']] = n['value'];
  });
  return indexed_array;
}
var $form = $("#ff");
$('#contactbtn').click(function (e) {
  e.preventDefault();
  var data = getFormData($form);
  console.log(data);
  localStorage.setItem('order', JSON.stringify(data));
  console.log('order');
  window.location.replace("./contactbooking.html");
});

Upvotes: 1

Views: 266

Answers (3)

Mister Jojo
Mister Jojo

Reputation: 22320

this so simple in pure JS....

const myForm = document.forms.ff

myForm.onsubmit=e=>
  {
  e.preventDefault()

  let data = {}
  Array.from(new FormData(myForm), (entry) => { data[ entry[0] ] = entry[1]} )

  console.log(data)

  // localStorage.setItem('order', JSON.stringify(data))

  // console.log(localStorage.getItem('order'))

  // window.location.replace("./contactbooking.html")
  }
<form name="ff" >
  <label>Name*:</label>
  <input type="text" placeholder="Please enter your name" name="name" required ><br>
  <label>Email*:</label>
  <input type="email" placeholder="Enter your Email ID" name="email" required ><br>
  <label> Mobile Number *:</label>
  <input type="text" placeholder="Enter Your Number" name="mobile" maxlength="10" required ><br>
  <label>Message*:</label>
  <textarea name="message" cols="500" placeholder="Message" required></textarea><br><br>
  <button class="sendButton" type="submit" >Send</button>
</form>

Upvotes: 0

Ryan Stone
Ryan Stone

Reputation: 383

Try fixing the HTML,
as it currently a bit skewed,
& would show some errors in a HTML Validator.

<form name="ff" id="ff">
     <label for="Name" style="font-family: sans-serif;">Name*:</label> 
     <input id="Name" type="text" placeholder="Please enter your name"
            name="name" required/>

     <label for="Email" style="font-family: sans-serif;">Email*:</label>
     <input id="Email" type="email" placeholder="Enter your Email ID"
            name="email"  required/>

     <label for="Mobile" style="font-family: sans-serif;">Mobile Number *:</label>
     <input id="Mobile" type="text" placeholder="Enter Your Number"
            name="mobile" maxlength="10" required/>

     <label    for="Message" style="font-family: sans-serif;">Message*:</label>
     <textarea id="Message" name="message" cols="500"
               placeholder="Message" required></textarea>

     <input id="Contact_Btn" class="sendButton" type="submit"
            name="Submit" value="Send"/>
</form>

If the Labels do not contain a valid for attribute, which matches the id of an element case-sensitively then this will cause an error in the Javascript console. Which may also prevent or block the built in form validation of the required attributes.. Try and let me know..

Also think if your putting required on a text area then you may need to specify a min & max number of chars, required for the field but not 100% sure about this, you may have to look that part up on W3c or Mozilla Developer Network..

Upvotes: 0

J. Harper
J. Harper

Reputation: 26

Instead of doing:

$('#contactbtn').click(function(e) {

you should capture the form submit event:

$($form).submit(function (e) {

Upvotes: 1

Related Questions