Div with reCaptcha error won't show - javascript

I have a reCaptcha inside Vue component as a part of my register form:
<div class="form-group">
<vue-recaptcha sitekey="KEY"></vue-recaptcha>
<div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
<strong>{{value}}</strong>
</div>
</div>
The problem is when I get message in errors.register.recaptcha - it doesn't appear in div I specified for show recaptcha error. I see that div in DOM console tab, I see error's text inside <strong></strong>, but I don't actually see it on the page. What's wrong? reCaptcha neighbourhood might prevent showing other elements?
I have some other groups which contains input + div where error might appeared and there are no problems to show an error.
Update: I noticed that only this one div with class="invalid-feedback" is display: none. All other div with the same class has display: block.

Solved by adding hidden input
<input class="form-control"
:class="{' is-invalid': errors.register.recaptcha}"
hidden>
The whole element might be
<div class="form-group">
<input class="form-control"
:class="{' is-invalid': errors.register.recaptcha}"
hidden>
<vue-recaptcha sitekey="KEY"></vue-recaptcha>
<div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
<strong>{{value}}</strong>
</div>
</div>

Related

PrimeNG Chips component using p-inputgroup challenge

First my code used simply String to define email but there were requirement to use multiple values instead of one String[]. I'm using PrimeNG 14.2.x combined with Angular 14 as frontend. Always with inputgroup using text have no problem but somehow it doesn't work well with p-chips component.
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<input type="text" pInputText placeholder="Email" name="recipientEmails">
</div>
</div>
result:
browser view - ok
after modification I've got
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<p-chips allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result:
browser view - failed
and from this point p-chips isn't useful anymore. User cannot see what is added.
I've stucked, Any ideas ?
I tried modify css directly to
.p-chips {
width: 100%;
}
but it didn't help
Ok, I've resolved this by using bootstrap right now
<div class="p-col-12 p-md-4">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><em class="pi pi-envelope"></em></div>
</div>
<p-chips placeholder="Emails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result
I hope it helps someone

Adding div inside another div without separate scope

I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}

Hidden div shows and disappears in a flash

I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>

Changing section focus on button click in Foundation CSS

I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)

Ignore automatically generated tabindex's

I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});

Categories