JSFiddle - React, Tailwind, and code Playground

by cemsultan

HTML

<form class="contact-form">

    <div class="box">
        <label for="email">E-Mail</label>
        <input id="email" type="email" name="email" placeholder="Max.Mü[email protected]" required autofocus>
    </div> 


    <div class="box">
        <label for="tel">Handy-No:</label>
        <input id="tel" type="tel" name="MobilNummer" placeholder="0179-123456789">
        
    </div>


    <div class="box">
    
    Geschlecht
    <label><input type="radio" name="gesclecht" id="radio" value="w">Frau</label>
    <label><input type="radio" name="gesclecht" id="radio" value="m">Herr</label>
    </div>




    <div class="box">
        <label for="checkbox">Checkbox</label>
        <input id="checkbox" type="checkbox" name="AGB" title="Name" value="OK">
        ich akzeptiere die AGB<br>
    </div>

    <div class="box">
        <label for="land">LAND</label>
        <select name="Land">
            <option>bitte wählen</option>
            <option>Deutschland</option>
            <option>Österreich</option>
            <option>Schweiz</option>
            <option>Holland</option>
            <option>Frankreich</option>
        </select>
    </div>

    <div class="box">
       
        
        <input type="submit" id="submit" value="Senden" disabled>
        
    </div>


</form>

CSS

.contact-form {
  background: #aaaaaa;
  padding: 25px;
  border-radius: 10px;
  width: 400px
}

.box {
  margin-bottom: 15px;
}

label {
  width: 100px;
  display: inline-block;
}
#radio {
  width: 55px;
  display: inline-block;
}
#submit {
	width: 150px;
	padding: 5px;
	margin-left: 100px;
}

JavaScript

function disableField() {
  const invalidForm = document.querySelector('form:invalid');
  const submitBtn = document.getElementById('submit');
  if (invalidForm) {
    submitBtn.setAttribute('disabled', true);
  } else {
    submitBtn.disabled = false;
  }


disableField();

const inputs = document.getElementsByTagName("input");
for (let input of inputs) {
  input.addEventListener('change', disableField);
}
const select = document.getElementsByTagName("select");
console.log(select)
select[0].addEventListener('change', disableField);