CODEWITHSUNDEEP
javascripthtml
Andrei Moza
Andrei Moza

Reputation: 63

How can I check if the type DATE is filled?

I have some questions.

I need to do an appointment form, where I have a bunch of text fields, for the name, email, a DATE field and two dropdown menus. At the end of the form, I have a submit button, but I want it to work only if all of the fields above are filled and if the fields are not filled i have an alert message. I did the verification for the name and email to see if the textboxes are empty or not, but I can't do it for the dropdown menus and the date. The date should be picked by the customer and if it's not picked from the menu I have the placeholder "DD.MM/YYYY". For the dropdown menus I also have placeholders, and I wanna check if the customer has picked one of the options, how can I check if the value of it is the placeholder name that i set? This is the code to check if the name and email fields are filled and it works. But I can't find any code to work to check if date is empty or the dropdown menus option is the same placeholder.

<script language="JavaScript1.1" type="text/javascript">
function popupok() {
ok = false;
test1=false;
const textbox1 = document.getElementById("name");
const textbox2 = document.getElementById("email");

if(textbox1.value.length && textbox2.value.length > 0)
{
    ok=true;
}

if(ok==true)
{
    alert("appointment has been scheduled!")
    
}
else
{
    alert("please fill the required fields!")
}
  
}





</script>



</head>
<body>
 <div class="container">
            <div class="row">
                <div class="col">
                    <div class="well-block">
                        <div class="well-title">
                            <h2>Programeaza-te acum!</h2>
                        </div>
                        <form required>
                            <!-- Form start -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="name">Nume</label>
                                        <input id="name" name="name" type="text" placeholder="Nume complet" class="form-control input-md"required>
                                    </div>
                                </div>
                                <!-- Text input-->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="email">Email</label>
                                        <input id="email" name="email" type="text" placeholder="E-Mail" class="form-control input-md" required>
                                    </div>
                                </div>
                                <!-- Text input-->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="date">Data programarii</label>
                                        <br/>
                                       <input type="date" id="date" name="date" required>

                                    </div>
                                </div>
                                <!-- Select Basic -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="time">Ora programarii</label>
                                        <select id="time" name="time" class="form-control" required>
                                            <option value="8:00">8:00</option>
                                            <option value="9:00">9:00</option>
                                            <option value="10:00">10:00</option>
                                            <option value="11:00">11:00</option>
                                            <option value="12:00">12:00</option>
                                            <option value="13:00">13:00</option>
                                            <option value="14:00">14:00</option>
                                            <option value="15:00">15:00</option>
                                            <option value="16:00">16:00</option>
                                            <option value="17:00">17:00</option>
                                            <option value="18:00">18:00</option>
                                            <option value="19:00">19:00</option></option>
                                            
                                        </select>
                                    </div>
                                </div>
                                <!-- Select Basic -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label" for="appointmentfor">Serviciul dorit</label>
                                        <select id="appointmentfor" name="appointmentfor" class="form-control" required>
                                            <option value="Service#1">Coafor</option>
                                            <option value="Service#2">Cosmetica</option>
                                            <option value="Service#3">Manichiura</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Button -->
                                
                                <div class="col-md-12">
                                <br/>
                                    <div class="form-group">
                                        <button id="singlebutton" name="singlebutton" type="submit"  onclick="popupok()">Rezerva locul!</button>
                                    </div>
                                </div>
                            </div>
                        </form>```

Upvotes: 2

Views: 94

Answers (3)

Sudhir
Sudhir

Reputation: 113

You have already used the "required" attribute in your fields which is a HTML5 attribute that forces the form not to be submitted if the field is empty, so you dont need additional JS code.

In case of select dropdowns you are missing an empty entry. Just add a first option in the dropdown with empty value and it will work. Do it like this:

<select name='myselect' id='myselect' required>
  <option value=''>Please select</option>
  <option value='1'>First option</option>
  <option value='2'>Second option</option>
</select>

Its important to have the first option with an empty value. The first option always gets selected by default and the empty value there will trigger the validation.

Upvotes: 0

Hesam
Hesam

Reputation: 74

use:

 const DROPDOWN = document.querySelector('.dropdown');
    if(DROPDOWN.value === '') { 
// do something  if empty 
} 
    if(DROPDOWN.value === 'option value') {
 // do something 
}

//every option has a value. in html you should specify it in tag by value = 'something';

to check if dropdown is chosen or not. although I don't know what kind of dropdown it is.

for date just do the same thing but like

 if(DATE.innerHTML === "DD.MM/YYYY") { //your placeholder
   // do something
}

or

 if(DATE.value === "DD.MM/YYYY") { //your placeholder
   // do something
}

if the user hasn't changed the date it would be same as your placeholder.

Upvotes: 2

Tristan F.-R.
Tristan F.-R.

Reputation: 4204

You can -- the date seems to be an empty string, so you can simply do:

if (date) {
  // date isn't an empty string, null, or undefined.
}


const input = document.getElementById("input");

console.log(`${input.value} (has value: ${!!input.value})`)

input.addEventListener("change", () => {
  console.log(`${input.value} (has value: ${!!input.value})`)
})
<input type="date" id="input">

Upvotes: 3

Related Questions