Form Validation on Select Element

Wappler General Bugs
#1

I have just come across this behaviour, I have an insert to database style form, in this form I have set many fields to required="" and if I submit the form without inputting anything all the required fields highlight red as expected except for the select element.

The only strange thing about how I made my select element was that I wanted the first selected option to be Please Select, with no value at all. Here is how it looks in code when the validation is not working correctly.

<div class="form-group row">
    <label for="g_title" class="col-sm-2 col-form-label">Title *</label>
    <div class="col-sm-10">
        <select id="g_title" class="form-control" name="g_title" required="" dmx-class:is-valid=“state.executing”>
            <option selected="">Please Select</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
            <option value="Mrs">Mrs</option>
        </select>
    </div>
</div>

Here is how it looks in code when it is working correctly

<div class="form-group row">
    <label for="g_title" class="col-sm-2 col-form-label">Title *</label>
    <div class="col-sm-10">
        <select id="g_title" class="form-control" name="g_title" required="" dmx-class:is-valid=“state.executing”>
            <option selected="" value="">Please Select</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
            <option value="Mrs">Mrs</option>
        </select>
    </div>
</div>

Look at the first option of Please Select, I added value="" to it and this forces to validation to correctly identify that this is not a valid value for a required="" select option. The problem here is that there is no other way i can find to make this value="" within the GUI, I had to use code to make this alteration.

#2

Go to the DOM panel, select the option, in this case the 1st option, -> Dynamic Attributes -> Input -> Value and save your document. The resulting code should be similar to

<option selected="" dmx-bind:value="">Option One</option>

1 Like
#3

Thanks @ben that is helpful to know, just so i know though, do you think this is still a bug as such that needs to be fixed, so if I do not input a value in one of the options it should auto have value="" or is it just normal behaviour that we should have to set in a situation like this. I can not for the life of me remember how DW used to do this.

#4

@psweb, Paul, in Dreamweaver I was hardly ever NOT in Code view, I used the extensions and adjusted the code where needed. As far as I can remember, I have always had to insert the ‘Please Select…’ part myself where the value was empty. Hence I am not surprised that in Wappler I need to also do this myself.

As a side note, I would not even bother to follow the procedure as I have outlined above, I go directly into Code view and add the line by hand. I know that this is not as Wappler is intended, but that’s me.

#5

Thanks @ben, that kind of confirms my thinking too, I have to admit it is not something i am too stressed about either, however as you say, it is not as Wappler intended it, so I will leave it as a bug for now, in the hopes that one day you and I will both be surprised when we hardly ever have to use code view, haha.

#6

That is not a bug
its how HTML forms work:sweat_smile:

#7

@mrbdrm I do sort of agree with that but surely if Wappler is attempting to make an application that can mainly be used in design view and is very simple for the less experienced user, then by inserting these values in the UX

57

55

should produce code that is going to flawlessly work with or without client side validation?

#8

The options panel is buggy and need to be fixed.
but its not time consuming to add the one option in code view
so its ok by me

#9

Agreed, especially that the options panel is buggy, lol, took me 4 attempts to get that info in there, deselect the element, reselect the element, try add another option, etc. etc. would have been quicker to write myself manually, and I would have added the value="" myself.

I think many of us have got used to adding stuff like this ourselves in code, and so we just never think any different, but if I put myself in the shoes of a person that is unaware of that, and they only used the UX, expecting that all would work, they would be in for a surprise.

Even in the official Bootstrap 4 docs they have it added in, so in my opinion, when the user checks the Validation Required checkbox, then all option fields without a Value should be set to value=""

27
Screen Shot 2018-08-05 at 14.22.27.png1637×1529 517 KB

3 Likes
#10

This will be improved in the next updates.

1 Like