How can I trigger an error message without submitting the form, for when I click on an input field and without typing something, if I click out of the input field it will trigger a validation error saying this field must not be empty. I tried using 'data-parsley-trigger="keyup"' but only works when something is typed in the input field
For example, if you click on the title field on this website https://deals.jumia.cm/en/posts/new and without typing anything in the field you click out of the title field, It will trigger a validation error
<form method="post" class="ad-form" enctype="multipart/form-data" data-parsley-validate >
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Title" required="required" data-parsley-maxlength="255" data-parsley-maxlength-message="Title can't have more than 255 signs." data-parsley-required-message="Please enter a title." data-trigger="focus" data-toggle="popover" data-content="Keep the title short and clear. Do not write the price in it or any information that is not relevant." data-parsley-validate-if-empty data-parsley-trigger="keyup"/>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
$('.popover-dismiss').popover({
trigger: 'focus'
})
</script>
<label for="category">Category</label>
<select id="Category" name="category" required="required" data-parsley-required-message="Please select a Category." data-level="0">
<option value="">Select Category</option>
</select>
<label for="subcategory">Subcategory</label>
<select id="Subcategory" name="subcategory" data-parsley-required-message="Please select a subcategory.">
<option value="">Select Category first</option>
</select>
</form>
Use data-parsley-trigger="blur" and data-parsley-validate-if-empty=true.
Related
I'm creating an artist's site. There is a contact form on the site, and I am trying to create a JS script to remove the hidden class I put on the commission rules, so it can be visible when the Commission option is selected on the form. I'm new to JS, but From the documentation I've read HTMLOptionElement type seems to be the best way to do this in vanilla JS. Here is the form, and my approximations of trying to remove the element:
<form action="action_page.php" id="contactform" method="post" action="FormToEmail.php">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<select id="reason" name="contact-reason">
<option value="None" selected disabled hidden>Reason for contact</option>
<option value="Brand">Brand</option>
<option id="Comission"value="Comission">Commission</option>
<option value="Other">Other</option>
</select>
<a class="invis hidden center" href=""> Commission rules</a>
<textarea name="contact-message" class="feedback-input" placeholder="Comment"> </textarea>
<input type="submit" class="button form-buttion" value="SUBMIT"/>
</form>
I've also tried selecting by ID, by tags, and other selectors. The JS is here.
var action = document.HTMLOptionElement("Commission")
if(action == true){
element.classList.remove("invis");
}
document.HTMLOptionElement is not a function. The correct way to check if an option is selected is:
document.getElementById('reason').value === "Commision";
You can also remove the id from the option element.
So:
if(document.getElementById('reason').value === "Commision"){
element.classList.remove("invis");
}
I have below form with input options and datalist no submit button. it is search bar that I created. I also have javaScript with onchange event to add href for option tags. The problem is, when users would like to search and type even a letter it starts searching. Users should fully type and than search engine should work. How do I prevent this?
$(document).ready(function() {
$("[list='serv']").on("input propertychange", function() {
window.location = $("#serv option[value='"+$("[list='serv']").val()+"']").find("a").attr("href")
});
});
<form class="search">
<input type="text" name="exx" list="serv" id="example">
<datalist id="serv">
<option value="google">google </option>
<option value="facebook">facebook</option>
</datalist>
</form>
Try this
document.getElementById("form").onSubmit=function(){
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
<form class="search" id="form">
<input type="text" name="exx" list="serv" id="example">
<input type="submit" style="display:none" value="Submit">
<datalist id="serv">
<option value="b">google </option>
<option value="z">facebook</option>
</datalist>
</form>
The option selection in the Select box is not available.I don't know what the cause is. If you check the value by notifying, the first option is "12. Selecting "36" also outputs "12"
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post">
#csrf
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list" onchange="this.form.submit()">
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
</form>
alert($("#inputState").val());
nothing is wrong with your code. you just dont get the logic properly. here is a modify version of your code i wrote. if its of help to you, vote me. thanx
//the blade form. the javascript gets the value of the selected item, assign it to the input box and submit your form automatically.
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post" id="submitForm">
{{ csrf_field() }}
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list">
<option value="">-Please Select-</option>
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
<input type="text" class="form-control" id="valueid" name="id" value="">
</form>
//javascript code
<script>
$(document).ready(function(){
$("#inputState").change(function(e){
var value= e.target.value;
//alert(value);
document.getElementById('valueid').value = value; //assign select value to input field.
$('#submitForm').submit(); //submit form
});
});
</script>
I want to hide a form field ("metodo") if the user select some ("Conta" or "Retirada") of the six options the previously form field ("operacao") has.
I've tried hiding (.hide()) the "metodo" form field with the .change() function based on the value (.val()) of the selected option of the "operacao" form field.
<form method=post>
{{ form.csrf_token }}
<label for="operador">Operador</label>
{{ render_field(form.operador) }}
<br />
<label for="operacao">Operação</label>
<select class="form-control" id="operacao" name="operacao" required="">
<option value="Foto Documento">Foto Documento</option>
<option value="Revelação">Revelação</option>
<option value="Foto Produto">Foto Produto</option>
<option value="Ótica">Ótica</option>
<option value="Conta">Conta</option>
<option value="Retirada">Retirada</option>
</select>
<br/>
<label for="metodo">Método de Pagamento</label>
<select class="form-control" id="metodo" name="metodo" required="">
<option value="Não se aplica">Não se aplica</option>
<option value="Dinheiro">Dinheiro</option>
<option value="Cartão">Cartão</option>
</select>
<br />
<label for="valor">Valor</label>
{{ render_field(form.valor) }}
<br />
<label for="observacao">Observação*</label>
{{ render_field(form.observacao) }}
<small id="observacaoHelp" class="form-text text-muted">*Opcional</small>
<br />
<button type="submit" class="btn btn-outline-success">Salvar</button>
</form>
<!--I have typed the output of the render_field(form.operacao) and
render_field(form.metodo) to make it easier to visualize. -->
<script>
$(document).ready(function() {
$("#operacao").change(function() {
if ($(this).val() == "Conta" || "Retirada"){
$("#metodo").hide();
}});
});
</script>
Since the options "Conta" and "Retirada in the "operacao" form field renders the form field "metodo" purposeless (and actually can be a problematic if other options aside "Não se aplica" are selected in the "metodo" form field) I want it completely hided (the option "Não se aplica" is already default on that form field, so no problem in hiding it).
However, selecting those options isn't hiding the field as expected.
I believe you issue is with the jQuery condition.
$(function(){
$("#operacao").change(function() {
if ($(this).val() == "Conta" || $(this).val() == "Retirada") {
$("#metodo").hide();
}
});
});
I am working on a form for my site of which users can input their account names and then they submit the list of account names.
Below is my HTML of which is inside a form (Please ignore any smelly code, I will sort it).
<div class="form-group">
<label asp-for="Accounts" class="control-label site-font">Accounts<b style="color: red">*</b></label>
<select id="account-list" name="accounts[]" multiple="multiple" class="form-control" asp-for="Accounts"></select>
<div style="margin-top: 1%"></div>
<input type="text" id="account-name" placeholder="Enter your Account Name" class="form-control" asp-for="Accounts" />
<div style="margin-top: 1%"></div>
<select id="platform-list" class="form-control">
<option>Xbox</option>
<option>PS4</option>
<option>PC</option>
</select>
<div style="margin-top: 1%"></div>
<select id="software-list" class="form-control">
<option>Microsoft Account</option>
<option>Playstation Network</option>
<option>Uplay</option>
<option>Steam</option>
<option>Discord</option>
<option>None of the above</option>
</select>
<div style="margin-top: 1%"></div>
<input type="checkbox" id="main-account"/> Main Account
<div style="margin-top: 1%"></div>
<input type="button" class="submit-button" value="Add Account" id="add" />
<span id="account-error" asp-validation-for="Accounts" class="text-danger"></span>
</div>
My issue is that whenever I click submit I get an Invalid Cast Exception.
My Controller takes a type of Member of which the Accounts property is a list of string.
Below is what the user will see when they have added a few of their accounts, and each row will be an item within the list.
I have used JavaScript to get this working, but I don't think that this will have any effect on the issue, so I haven't included it in the question but if you want to see it then let me know.
If I have missed anything, or the question is unclear then please let me know and I will try to get back to it as soon as possible.
The reason you're getting the error is because the form is posted with something as follows:
"accounts[]" = "SelectedOption1"
"accounts[]" = "SelectedOption2"
"accounts[]" = "SelectedOption3"
....
I think that the easiest way to get around this would be to make the "Accounts" property an array/list of strings. If you are unable to do that you could use JS to store the selected values in a comma-delimited string and post that field to the accounts property instead of the control:
<select id="account-list" multiple="multiple" class="form-control" asp-for="Accounts">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input type="hidden" id="accountInternal" name="accounts[]" value="" />
$("form").submit(function () {
$("#accountInternal").val($("#account-list").val().toString());
return true;
});