有没有一种方法可以防止用户在至少移动滑块（输入类型=范围）之前提交表单？

Question

I have a slider in my html form like this. It is for an online experiment. I have already set it to be required, but the thing is I wanna make sure the user has manipulated the slider in any way before submitting (ie, click it at least). Because the slider comes at 50% position chose already by default, the user could just click "OK" without actually thinking about the answer. In this way, I could behaviorally force them to click it at least and make some reflections.

I've done Googling and didn't find any solutions on this.

<form id="q-familiarity">
  <label for="fam slider">How well are you familiar with this item ?   </label><br>
  <input name="fam slider" type="range" min="1" max="100" value="50"  step="0.5" class="slider" id="fam-slider" required>
  <button type="submit" form="q-familiarity">OK</button>
<form>

How could I implement a mechanism, where user has to at least click the slider once to "activate" the OK button (perhaps also OK goes from grey to black to indicate the change)?

I would prefer the solution to be html and css based, with as little js as possible. (I learned html and css by myself for the experiment and don't know any js) But I would guess js has to be used in the solution, which is ok.

Thank you.

Answer 1

I'd suggest to disable the submit button by default and enable only if the user interacts with the input, like so

Codepen demo

<form>
  <label for="fam slider">How well are you familiar with this item ? </label><br>
  <input type="range" min="1" max="100" value="50" step="0.5"  id="fam-slider" required>
  <button type="submit" id="submit-btt" disabled="disabled">OK</button>
<form>

Js

let slider = document.getElementById('fam-slider');
let button = document.getElementById('submit-btt');
slider.addEventListener('input', () => {
  button.removeAttribute('disabled');
})

At the input event on the slider remove the disabled attribute on the submit button.

I've used the input event instead of the change event because it is triggered as soon as the user drags the slider control, and allows the user to also choose the starting value (if he wants to)

Answer 2

Well, unfortunately you need to use JS anyway to do it. If I have understood correctly, you're looking for a simple change event .

 var slider = document.getElementById( 'fam-slider' ); var submit = document.getElementById( 'submit' ); slider.addEventListener( 'change', function() { submit.disabled = false; }); 

 <form id="q-familiarity"> <label for="fam slider">How well are you familiar with this item ? </label><br> <input name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required> <button id="submit" type="submit" form="q-familiarity" disabled>OK</button> <form> 

Answer 3

You can check if the slider was changed or clicked and set a validation variable. Then on submit check your "valid" flag:

 var valid = false; $("input.slider").on("change click", function(){ valid = true; }); $("#submit").click(function(){ if (!valid){ // do your logic here console.log("not valid"); return false; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="q-familiarity"> <label for="fam slider">How well are you familiar with this item ? </label><br> <input name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required> <button id="submit" type="submit" form="q-familiarity">OK</button> <form> 

Answer 4

Here is a jQuery solution for you if you prefer it over vanilla JS. The button is by default disabled, but as soon as you change the slider it becomes active.

 $('#slider').change(function() { $("#submitbutton").prop("disabled", false); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="q-familiarity"> <label for="fam slider">How well are you familiar with this item ? </label><br> <input id='slider' name="fam slider" type="range" min="1" max="100" value="50" step="0.5" class="slider" id="fam-slider" required> <button id= "submitbutton" type="submit" disabled='true' form="q-familiarity">OK</button> <form>