CODEWITHSUNDEEP
javascriptjquery
DaveW
DaveW

Reputation: 5

Submit form on keypess after verification

$(document).ready(function() {
//attach keypress event listener to the whole document
$(document).keypress(function(event){
if(event.keyCode === 13){
SearchThis.submit();
return false;
}
});

});

So now my form (SearchThis) is submitted whenever the enter key is pressed which is great however how do I modify it to check if mysearchfied has been completed before it submits?

IE. If mysearchfied is empty and the enter key is pressed don't submit the form. If mysearchfied contains text and the enter key is pressed then submit the form.

Hope you can help! Thanks...

Upvotes: 0

Views: 62

Answers (5)

Dimag Kharab
Dimag Kharab

Reputation: 4519

if (event.keyCode === 13) {   

    if ($('mysearchfied_ID_or_Class').val()!=='') {
          //mysearchfied is not empty
             SearchThis.submit();
    }  
    else {
         //dont submit, do your checks
    }

    return false;
}

Upvotes: 0

Makudex
Makudex

Reputation: 1082

if the id of your input field is mysearchfield, then you could do it like this:

var msf = document.getElementById("mysearchfield").value;

$(document).ready(function() {
//attach keypress event listener to the whole document
$(document).keypress(function(event){
if(event.keyCode == 13){

  if (msf != "") {
    SearchThis.submit();
    return false;
  }
  else
  {
    // some code here....
  }
}
});

});

Upvotes: 0

yevt
yevt

Reputation: 814

listenOn = function(domElement) {
  domElement.addEventListener('keydown', function(event) {
    if (event.keyCode == 13) {
      onEnterPressed();
    }
  });

  function onEnterPressed() {
    if (validateForm()) {
      submitForm();
    } else {
      alert('Invalid form');
    }
  }

  function validateForm() {
    var inputValue = document.getElementById("myInput").value;
    return (inputValue.length >= 1);
  }

  function submitForm() {
    var formElement = document.getElementById("myForm");
    alert('Submit form');
    formElement.submit();
  }
}

listenOn(document);
//listenOn(document.getElementById("myForm")); //You could also listen keydowns on form element(sure only if global keypress isn't exactly what you want).
<form id="myForm" action="#send.php">
  <input id="myInput" type="text" placeholder="I'm empty now." />
</form>

Upvotes: 0

Light
Light

Reputation: 1097

If you just want to validate the textbox for required use HTML5 required attribute like:

<input type="text" class="form-control" name="mysearchfield" 
value="" id="mysearchfield" placeholder="Company or SmartPages   Category..." autocomplete="off" required>

Upvotes: 1

Rudresha Parameshappa
Rudresha Parameshappa

Reputation: 3926

There are two ways to validate the form.

-> Check is the form valid usind the form valid function 

 SearchThis.validate().valid()

-> validate each field for value as told by @n01ze

Upvotes: 0

Related Questions