I am using Angular 7 and would like to disable a button whenever two inputs are not matching specified criteria.
I have the following code:
HTML:
<input type="text" pInputText [(ngModel)]="name" placeholder="placeholder"/>
<input type="text" pInputText [(ngModel)]="identifier" placeholder="identifier"/>
<button pButton type="button" class="ui-button-raised ui-button-rounded" label="Click me!" disabled="{{validateIdentifier() && name.length > 0}}"></button>
TS:
private identifier: string = "";
private name: string = "";
validateIdentifier(): boolean {
const REGEXP = new RegExp(/[EHIS]-[0-9]{9}/);
return REGEXP.test(this.identifier);
}
So when I insert a string matching the following regex: (E|H|I|S)-[0-9]{9} and the length of the inserted name-attribute is at least 1, I'd like to have my button enabled, else not.
Sadly my button is (and stays) disabled on any input. What did I do wrong on that?
I think you have a slight error in your boolean logic. I think you want to negate the result of validateIdentifier() and say if not vailidateIdentifier or the length is 0 then disable. E.G.
<button
pButton
type="button"
class="ui-button-raised ui-button-rounded"
label="Click me!"
[disabled]="!validateIdentifier() || name.length === 0">
</button>
Related
I have question about Cypress.
I have an element on page which doesn't appear allways. There is no logic when it shows and when not.
Is in Cypress some IF/THEN function or something how do you check if the element is displayed (so fill it up) and when you don't see it than skip that step?
My code:
if (Cypress.$('[data-bind="validationElement: interestInsurable"]').length > 0) {
cy.get('[for="p4-conditional-csob-interest-insurable-1"]').click()
}
else {cy.get('#car-info-serie')}
This is how it looks like in playground:
Picture
And there is HTML of that checkbox:
<label class="z-radio z-radio-inline primary" for="p4-conditional-csob-interest-insurable-1" data-bind="popover: { content: VehicleInsuranceTooltips.conditionalDataCsobInterestInsurable1Tooltip }" data-original-title="" title="">
<input id="p4-conditional-csob-interest-insurable-1" name="p4-conditional-csob-interest-insurable" type="radio" class="custom-radio" data-toggle="radio" data-bind="checkedValue: 1, checked: interestInsurable" value="1">
<span class="icons">
<span class="icon-unchecked"></span>
<span class="icon-checked"></span>
</span>
Patří vozidlo zájemci o pojištění?
</label>
There is no built in way to do this in cypress. I am using this in my tests:
if (Cypress.$("#yourElement").length > 0) {
// element exists, do something
} else {
// element does not exist, do something else
}
You have to click on the input element instead of the label:
cy.get('#p4-conditional-csob-interest-insurable-1').click();
Anyways have a look at the Cypress Docs as conditional testing is strongly discouraged.
I want to auto-validate the input in some <paper-input-container>'s <input is="iron-input"> field, so that it follows a dd.mm.yyyy pattern. Can I do this with the pattern attribute?
I tried pattern="^(\d{2}).\d{2}.(\d{4})$" and pattern="(1-9|0[1-9]|1[0-9]|2[0-9]|3[0-1]).([1-9]|0[1-9]|1[0-2]).(20[1-3][0-9])" together with allowed-pattern="[\d.]", but that doesn't work.
Is the pattern attribute meant to support this use case?
The <paper-input>.pattern is ignored unless you do one of the following:
Enable automatic input validation with <paper-input>.autoValidate
<paper-input auto-validate
pattern="^(\d{2}).\d{2}.(\d{4})$">
</paper-input>
codepen
Manually call <paper-input>.validate() (e.g., on button click)
<paper-input id="input" pattern="..."></paper-input>
<button on-tap="_validateInput">Validate</button>
// script
_validateInput: function() {
this.$.input.validate();
}
codepen
Set <paper-input>.required, and use an <iron-form> wrapper, which automatically calls <paper-input>.validate() on submit
<form id="form" is="iron-form" ...>
<paper-input required
pattern="..."></paper-input>
<button on-tap="_submit">Submit</button>
</form>
// script
_submit: function() {
this.$.form.submit(); // <-- auto validates required form inputs
}
codepen
I am submitting a file in a cfdiv container, but the value of the file is not submitting to the processing page. If I submit the file outside of the cfdiv, it sees the file value. However, if the file is inside a cfdiv or div container, the form field is undefined. I have also added the enctype="multipart/form-data" to the cfform, but it is still not working.
UPDATE:
This is the first page (index.cfm)
<div name="loadcontainer" id="loadcontainer">
<cfinclude template="homepage.cfm">
</div>
The homepage.cfm
<cfform name="school_create" id="school_create"
action="pro_create_school.cfm"
enctype="multipart/form-data"
method="post">
<cfinput size="50" type="file" id="school_logo" name="school_logo">
<button type="submit">Save</button>
</cfform>
When the save button is clicked, it doesn't see the form.school_logo value in the action processing page.
I have also tried using a normal form and input, instead of a cfform/cfinput, but the form is being loaded into another tab when submitted, instead of the div container.
"File" is an incorrect "type" for a CFINPUT in earlier CF Versions (not sure what version you are using). I did check the docs and it is allowed in current versions.
Meanwhile, Instead change your CFINPUT to:
<input size="50" type="file" id="school_logo" name="school_logo">
Or better yet, get rid of <cfform> - you aren't using it for anything and you don't need it. A good JS library (jquery) will provide you with better functionality for validation etc.
In this case you could easily do:
<form name="school_create" id="school_create"
action="pro_create_school.cfm"
enctype="multipart/form-data"
method="post">
<input size="50" type="file" id="school_logo" name="school_logo">
<button type="submit">Save</button>
</form>
And it would work as expected. Cfform is designed to provide simple validation functions in a native CF Fashion, but outside of tutorials and books explaining CFML almost no one uses it. When we see it used here at CF Webtools, we refactor it as soon as we are able.
I was able to Submit the form both the <cfinput type="file"..../> and other form field in the form with ajax.
<script>
function validateForm() {
var x = document.forms["add_academic_year"]["start_year"].value;
var y = document.forms["add_academic_year"]["end_year"].value;
if (x == null || x == "" || y == null || y == "") {
alert("Start Year and End Year Must be Selected");
return false;
}
if (y <= x) {
alert("End Year must be greater than Start Year ");
return false;
}
console.log("submit event");
var fd = new FormData(document.getElementById("add_academic_year"));
$.ajax({
url: "pro_academic_year.cfm",
type: "POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( response ) {
// display response in DIV
$("#loadcontainer").html( response.toString());
})
.fail(function(jqXHR, textStatus, errorMessage) {
// display error in DIV
$("#outputf").html(errorMessage);
})
return false;
}
</script>
I'm new to Google's Places API. I'm trying to get a Django form to autocomplete, but for some reason, only one of the fields (Street 2) will autocomplete. The rest are just blank. And my console throws no errors, so I really have no idea what the issue is.
The other WEIRD thing . . . the inputs are holding the initial values that I passed to the form from the Django view even though the google autocomplete javascript has set them to "" before trying to autofill them. Is that normal?
Here's the HTML:
<div id="locationField">
<input id="autocomplete" name="search_address" onFocus="geolocate()" placeholder="Search for your address . . ." type="text" />
</div>
<hr class="hr-style">
<div >
<strong>Street</strong>
<input id="street_name" name="street" type="text" value="1030 E State Street" />
</div>
<div >
<strong>Street 2</strong>
<input id="route" name="street2" type="text" value="Apt. 2A" />
</div>
<div >
<strong>City</strong>
<input id="city" name="city" type="text" value="Los Angeles" />
</div>
<div class="6u 12u$(small) ">
<strong>State</strong>
<select id="state" name="state">
<!-- options removed for brevity's sake -->
</div>
<div class="6u 12u$(small) ">
<strong>Zip</strong>
<input id="zipcode" name="zipcode" type="text" value="90210" />
</div>
And the javascript, just copied from Google and modified with my input id's:
//geosearch powered by Google
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
$(function(){
initAutocomplete();
});
var placeSearch, autocomplete;
var componentForm = {
street_name: 'short_name',
route: 'long_name',
city: 'long_name',
state: 'short_name',
zipcode: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation
I'm thinking it has got to be failing somehow at this if statement in fillinAddress(), but I can't tell why:
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
Any help would be appreciated! And here's a screenshot of the form!
Turns out you can NOT rename the address form components. (I had renamed 'locality' to be 'city' and 'administrative_area_level_1' to be 'state.') I'm so new to this; I had no idea! I just thought that the variable names in the javascript had to match your input id's in your HTML. Turns out the address form components have to stay:
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
I want to make mail validation with regex but it's not working.where is my mistake?
It's normally working but when I put a regex control its never see yes the mail you key in is enable for this regex format.
Here is my code;
index.jsp
<head>
<title>Mail Control From Db</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="check.js"></script>
</head>
<body>
<div align="left">
<form name="chkForm" id="chkForm" method="post" >
<table>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" id="email" size="20" ></td>
<td>
<div id="emailInfo" align="left"></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
check.js
$(document).ready(function()
{
var myForm = $("#chkForm"), email = $("#email"), emailInfo = $("#emailInfo");
//send ajax request to check email
email.blur(function()
{
$.ajax({
type: "POST",
data: "email="+$(this).attr("value"),
url: "check.jsp",
beforeSend: function()
{
emailInfo.html("<font color='blue'>Kontrol Ediliyor..</font>");
},//end beforeSend: function()
success: function(data)
{
var reg = /\S+#\S+\.\S+/;
if (reg.test(email.val()))
{
var checkData = data.toString();
if(checkData == 0)
{
emailok = false;
emailInfo.html("<font color='red'>Mail in use</font>");
}//end if(checkData == 0)
else if(checkData == 1)
{
emailok = true;
emailInfo.html("<font color='green'>Mail is not in use</font>");
}//end else if(checkData == 1)
}//end if (reg.test(email.val()))
else
{
emailInfo.html("<font color='red'>ınvalid mail</font>");
}//end else
}// end success: function(data)
});
});//end email.blur(function()
});//end $(document).ready(function()
I had a problem in check.jsp. and solved it.
problem is about regex.Regex was false.
condition was false. i change it with if (reg.test(email.val())).
Your regex only allows capital letters, so TEXT#EXAMPLE.COM would be okay but test#example.com not. You can change that either by adding the case-insensitive-flag to your regex
/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,6}$/i
or simply allow a-z in the regex itself
/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/
But keep in mind that checking emails for validity is quite a difficult tasks to do, as the range of allowed mail-adresses is extremely broad and they even could contain special-chars like äüö etc. So your regex is not perfect, keep that in mind!
In PHP, I used this function for years and it always seemed to work.
Why exactly are you using .toString() in this case? .test() gives you an boolean which you can perfectly check with == false - is there any reason why you want to convert this to a string?