How to call HTML required attribute when the value is 0?

Question

I have a drop down list where I'm populating data from the database.

<div class="form-group">
  <label>Title:</label>
    <select class="form-control" name="Title" id ="titleselect" required>
        <!-- <option value="" selected="selected">?</option> -->
        <?php foreach ($titles as $row) {            
            if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
            <option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
     <?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
    </select>
</div>

My form,

How values are populated from the database,

My database table,

I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.

Or I would like to disable the option with the '?' mark.

How can I do achieve this?

If I understand you correctly, you don't want `0` (`?`) to be considered "valid" for purposes of submitting the form? This looks like it may be helpful: https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box Though there are some interesting conversations in the comments about browser comparability. Looks like it's been helpful to a lot of people though. — David, Dec 16 '17 at 13:43
@David, I'm actually looking at something like this. I want to disable the users ability to pick the question mark. Is there anyway that I can achieve this? — user5455438, Dec 16 '17 at 14:00
@freedomn-m, this is exactly what I wanted to find out. Can you please add your comment as an answer so it is easy to understand your code — user5455438, Dec 16 '17 at 14:19

score 1 · Accepted Answer · answered Dec 16 '17 at 15:57

I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.

<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>  
<?php foreach ($titles as $row) {                          
          if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
          <?php  if(($this->session->userdata('Title') == 0)) { ?>
                  <option value="" selected disabled><?php echo $row->value; ?></option> 
          <?php  } else{?>
                  <option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
          <?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>

score 0 · Answer 2 · answered Dec 16 '17 at 13:50

you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then

$('option#yourZeroOption').each(function() {
    if ($(this).isChecked())
       $("select").attr("required", true);
     else
       alert('this filled cannot be ?');
});

since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that

Thank you very much for your help. I have posted my solution — user5455438, Dec 16 '17 at 15:59

score 0 · Answer 3 · edited Dec 16 '17 at 13:54

0

If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.

Example

$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');

Note: JS validation works, But keep mind it's not always.

edited Dec 16 '17 at 13:54

Funk Forty Niner

74,450
15
68
141

answered Dec 16 '17 at 13:51

Abdulla Nilam

36,589
17
64
85

Thank you very much for your help. I have posted my solution – user5455438 Dec 16 '17 at 15:59
@downvoter any comments? However I've reported this to mods regarding serial downvote. – Abdulla Nilam Dec 20 '17 at 10:05

jasinth premkumar · Answer 4 · 2017-12-16T14:42:23.163

0

we cant make it require with 0 value it can be done only if value=""

here is my idea,

<form action="/action_page.php">
<select required>
  <option value="0">?</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
                       $("select option:selected").val("");
   
});
</script>
<style>

edited Dec 16 '17 at 14:42

answered Dec 16 '17 at 14:04

jasinth premkumar

1,430
1
12
22

However, is there anyway that I can block form from proceeding to the next step instead of colour change? Maybe some JavaScript alert? – user5455438 Dec 16 '17 at 14:08
yes you can stop do you need me to update does it have submit button – jasinth premkumar Dec 16 '17 at 14:09
Can you please update. It doesn't have a submit button. It goes to the next part of the form – user5455438 Dec 16 '17 at 14:15
give the structure of full `form` – jasinth premkumar Dec 16 '17 at 14:16
Do you know whether it is possible to change the value. For example, if($(this).val()==0), then change the value to "". Then required can be called. I' m looking for something like this – user5455438 Dec 16 '17 at 14:24
It still does not seem to work to be honest. Is it possible to add this validation just for this part. For example, the id of my select is "titleselect". Is there a way to call required attribute by just using this id and javascript – user5455438 Dec 16 '17 at 14:35
Thank you very much for your help. I have posted my solution – user5455438 Dec 16 '17 at 15:58
i had the same idea like printing directly from PHP at first but ,i thought ou needed it in javascript so... – jasinth premkumar Dec 16 '17 at 16:18

score 0 · Answer 5 · answered Dec 16 '17 at 14:38

0

You should mark your <select> field as required, then the first option as disabled (and selected):

<select required>
  <option value="" selected disabled>?</option>
  <option value="1">Mr.</option>
  <option value="2">Miss</option>
  <option value="3">Mrs.</option>
</select>

This will make the first entry work as a placeholder basically.

answered Dec 16 '17 at 14:38

moonwave99

21,957
3
43
64

This is what I tried in the begging. You can actually see it commented out in my code. When I run this, it automatically skips the option with value = "" and start from 1,2,3 etc. I think this is because I'm querying data from the database. Is it possible to embed the code that I commented out with other option values? – user5455438 Dec 16 '17 at 14:43
If you use `value=""`, `selected` and `disabled`, it shouldn't ([see fiddle](https://jsfiddle.net/a2v77u8x/)). – moonwave99 Dec 16 '17 at 15:13
I know what you mean. However, because of the foreach loop, it selects the option after val = "". So when the form loads, it skips the val ="" and start from val = 0 – user5455438 Dec 16 '17 at 15:25
Well just don't put it in the DB then, or set `value=""` when `id == 0`, that's it ^^ – moonwave99 Dec 16 '17 at 15:32
Thank you very much for your help. I have posted my solution – user5455438 Dec 16 '17 at 15:58

How to call HTML required attribute when the value is 0?

5 Answers5