javavscript check if required input triggered

Question

I have a page where there is a save button. If click the save button it submits the page and while submitting it gives the whole body an opacity and a loading animation. There are several input required in the page and when I save (submit) the page it checks the required inputs and gives the warning when it's not filled in. But it still gives the opacity and the loading animation (but does not submit, which is good).

Now my question is; how do I check if a input required is not filled in with a javascript function so I can then trigger the opacity (or not).

Please share your code here. This is impossible to answer without it. — BenM, Dec 19 '18 at 10:01
Before you load the animation can you not just use jquery to check to see if the text boxes you want required have a value? Something like $("#//ID OF TEXT BOX").val() — JamesS, Dec 19 '18 at 10:02

andrea06590 · Answer 1 · 2018-12-19T10:24:31.820

1

there is multiple way to do that,

You can add a default values to every input : <input id="inputPassword1" type="text" value="default"/>
You can use Bootpstrap validators : http://1000hz.github.io/bootstrap-validator/
You can also use HTML default validation : https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

My favorite one is to play with input values and regular expressions, you'll have full control on the inputs. Just get the elements using getElement (js) or selector $('#input') (jquery) and check them one by one.

edited Dec 19 '18 at 10:24

answered Dec 19 '18 at 10:12

andrea06590

1,259
3
10
22

Thanks! I'll add a default value to every input. – Luc Drenth Dec 19 '18 at 10:22
Yes then you'll need to check each input, don't forget to add an id in order to get the element : var pass1 = document.getElementById('#inputPassword1'); console.log(pass1.value) or something like that :) – andrea06590 Dec 19 '18 at 10:24

score 1 · Answer 2 · answered Dec 19 '18 at 10:39

Considering how you've provided little detail, I'm going to assume that this is the kidna thing that you're looking for?

// Wrap it all up in some name space, prevent everything from beign global. 
const App = function(myNameSpace) {


  // A function to call when the form is in fact valid.
  const onValid = () => {
    console.log('VALID! YAY!');
  };


  // A function to call when the form is in fact invalid. 
  const onInvalid = () => {
    console.log('Booo! Invalid!');
  };


  // A function to run when the button has been clicked. 
  const buttonHandler = (e) => {
    let isValid = true,
      validInputs = [],
      invalidInputs = [];
    e.preventDefault();

    Array.prototype.slice.call(document.querySelectorAll("form input:required")).map(i =>
      i.value.replace(/\ /g, '').length > 0 && isValid == true ?
      isValid = true && validInputs.push(i) :
      isValid = false && invalidInputs.push(i)
    );

    isValid != false ? onValid(validInputs) : onInvalid(invalidInputs);
  };


  // A simple function that we wish to expose.
  myNameSpace.launch = () => {
    console.log('Lunching app...');
    document.querySelector('form input[type=submit]').onclick = buttonHandler;
  };


  // Simply return the namespace object.
  return myNameSpace;
}({});


// Start the app! 
App.launch();

<form>
  <input type="email" required/>
  <input type="password" required/>
  <input type="submit" value="Log In" />
</form>

score 0 · Answer 3 · answered Dec 19 '18 at 10:33

You can check if a form input has a value by using the value property of the input

plain javascript:
        let value = document.querySelector("input#required").value;
        if(value) {
            //do something show animation and submit the page
        }else {
            //propmt that the value is required
        }

    using jQuery:
        let value = $("input#required").val();
        if(value) {
            //do something show animation and submit the page
        }else {
            //propmt that the value is required (don't show animation or submit the form)
        }

For checkboxes you can use the checked property instead of the value property. This return a boolean value indicating whether the field has been checked or not.

let value = document.querySelector("input#required").checked;

javavscript check if required input triggered

3 Answers3