The scenario is, when I click a button browser would show an alert which accepts user input field with OK and cancel buttons. Now please tell me how to handle this type of alert. As we know CasperJS doesn't displays the alert windows.
This is the casperJS code
casper.then(function () {
this.click('#new-asset > a:nth-child(1)');
casper.setFilter("page.prompt", function(msg, currentValue) {
if (msg === "Choose a filename for your asset") {
return "Firsr.txt";
}
});
});
You can easily solve this by using a Filter in CasperJS. The appropriate one is page.prompt:
// put somewhere before the prompt appears
casper.setFilter("page.prompt", function(msg, currentValue) {
if (msg === "What's your name?") {
return "Chuck";
}
});
Such a dialog is called a prompt (window.prompt()) which is distinct from an window.alert() or window.confirm().
Related
I have a page with a modal. Inside the modal , i have two buttons. Close and Save Changes. I am trying to add a simple password protected on Save Changes button press. User press button and a pop up with only password. If password is correct continue the rest code. Else alert message.
js:
$('#UpdateForm').submit(function(event) {
if ($pass=="pass") {
echo "Rest Code Here";
} else {
echo "Wrong!";
}
}
I think the code would like like this. How to add pop up and make it work. It is simple protected and no secure as is for local use.
You can use the Window prompt() Method.
The prompt() method displays a dialog box that prompts the visitor for input.
A prompt box is often used if you want the user to input a value before entering a page.
Note: When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed.
w3schools.com - Window prompt() Method
You can try the following code:
$('#UpdateForm').submit(function(event) {
y = prompt("Please insert code to continue.");
if (y == "pass") {
alert("Rest Code Here");
} else {
alert("Wrong!");
//Stop closing modal
return false;
}
})
You can use SweetAlert2 to do it
See here https://codepen.io/5hiny/pen/PobNbGQ
Swal.fire({
title: 'Enter password to save',
input: 'text',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
preConfirm: (pass) => {
if (pass == 'password') {
document.write("SAVE");
} else {
document.write("FAIL");
}
},
allowOutsideClick: () => !Swal.isLoading()
})
To make an evaluation on the last page of a portal, using the submit button, Microsoft provides an extension for the function "webFormClientValidate" that the submit button should trigger:
https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/add-custom-javascript.
I put this code in my last step in the portal:
console.log("alive");
if (window.jQuery) {
console.log("1");
(function ($) {
console.log("2");
if (typeof (webFormClientValidate) != 'undefined') {
console.log("3");
var originalValidationFunction = webFormClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == "function")
{
console.log("4");
webFormClientValidate = function()
{
console.log("5");
originalValidationFunction.apply(this, arguments);
console.log("6");
// do your custom validation here
if (...)
{
console.log("7 false");
return false;
}
// return false;
// to prevent the form submit you need to return false
// end custom validation.
return true;
};
}
}
}(window.jQuery));
}
On pageload the log writes out:
alive
1
2
3
4
Pressing the submit button should trigger the "webFormClientValidate" function, but nothing happens. "5" is not being written to the log. Anyone know why?
Update: From debugging it appears as if the page does not recognize "webFormClientValidate" at all. Searching through the elements however, this guy appears:
function webFormClientValidate() {
// Custom client side validation. Method is
called by the next/submit button's onclick event.
// Must return true or false. Returning false
will prevent the form from submitting.
return true;
}
My research shows other people just pasting in the same bit of code. Witch tells me that it should work somehow:
http://threads290.rssing.com/chan-5815789/all_p2645.html
https://rajeevpentyala.com/2016/09/12/useful-jscript-syntaxes-adx-portal/
http://livingindynamics365.blogspot.com/2018/02/validating-user-input-in-crm-portals.html
If you are using an Entity Form, use entityFormClientValidate in place of webFormClientValidate
I'm building a registration page and I want the button to be disabled until all of the inputs pass validation. Well I have all of the native validation logic done (missing values, pattern mismatch, etc...), but I wanted to implement a "username taken/available" piece of validation where the button still wouldn't be enabled until the username had valid inputs for all of their inputs AND supplied a desired username that was not already in use.
I have the server call and all of that all done, my only issue is the actual enabling/disabling of the button and assigning the border classes to the inputs. Here is my code for the response from the AJAX call:
ajax.onload = function() {
if (this.responseText === "taken") {
if (username.classList.contains("taken")) {
return;
} else {
username.classList.remove("successBorder");
username.classList.add("errorBorder");
username.classList.add("taken");
}
} else {
if (!username.checkValidity()) {
username.classList.remove("successBorder");
username.classList.add("errorBorder");
return;
} else {
username.classList.remove("errorBorder");
username.classList.add("successBorder");
username.classList.remove("taken");
}
}
}
And then here is the code for where the button is enabled/disabled that is called on the input event for every input element:
function validate() {
if (document.querySelector("form").checkValidity() && !(username.classList.contains("taken"))) {
registerButton.removeAttribute("disabled");
const ruleSpans = document.querySelectorAll("span[data-rule]");
for (span of ruleSpans) {
span.classList.add("hide");
}
for (input of inputs) {
input.classList.remove("errorBorder");
input.classList.add("successBorder");
}
return;
}
registerButton.setAttribute("disabled", "true");
if (this.checkValidity()) {
// Get rid of the error messages
this.classList.remove("errorBorder");
this.classList.add("successBorder");
const ruleSpans = document.getElementsByClassName(this.id);
for (span of ruleSpans) {
span.classList.add("hide");
}
return;
}
// Adding attention borders and error messages based upon what the issue is
this.classList.remove("successBorder");
this.classList.add("errorBorder");
const ruleSpans = document.getElementsByClassName(this.id);
for (span of ruleSpans) {
span.classList.add("hide");
switch (span.getAttribute("data-rule")) {
case "patternMismatch":
if (this.validity.patternMismatch) {
span.classList.remove("hide");
}
break;
case "valueMissing":
if (this.validity.valueMissing) {
span.classList.remove("hide");
}
break;
case "typeMismatch":
if (this.validity.typeMismatch) {
span.classList.remove("hide");
}
break;
}
}
}
And right now, the disabling/enabling works IF it's the first time on input for that element, but it is "behind" all of the times after the first time. (for example, if the username is taken, the register button is enabled, but if the username is taken, the register button is disabled, the exact opposite of what I want happening).
So I thought, instead of checking for it the correct way (the way I did it in the code !(username.classList.contains("taken"))), I would reverse the logic to look like this: username.classList.contains("taken"). And that works (even though it is logically wrong and incredibly hack-y), EXCEPT for the first time a taken username is had.
What am I doing logically wrong here?
I would suggest you to have a code structure like this
function serverValidation () {
//make the ajax call here to validate all server validation
//send the success callback handler to 'clientValidations'
}
function clientValidations(){
//validate other form elements that does not require a server request here
//Then submit the form through an ajax form submit
submitFormThroughAjax();
}
function submitFormThroughAjax() {
//submit the form through ajax.
}
function onSubmit(event) {
event.preventDefault();
serverValidation();
}
//Here onSubmit should be attached to the form submit handler.
Refer:below link to know how to submit a form through ajax.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
This example does all the validations only after the user submits but if you want the errors to be shown instantaneously as the user interacts you need to handle it through specific form element events.
I am making in which I want to display alert box and then redirect it to some other page in asp.net
My code is
var s = Convert.ToInt32(Session["id"].ToString());
var q = (from p in db.students
where p.userid == s
select p.sid).SingleOrDefault();
if (q == 0)
{
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "reg();", true);
}
this is my reg() function
function reg() {
var con = alert('Please Register Your Self Fisrt ..!! Thank you');
window.location = "reg.aspx";
}
My code is working fine but alert box gets disappear after some second without clicking on it because of that user is unable to read alert message
I want to redirect it to reg.aspx but after clicking OK on alert box ..
please help
Firing a confirm box instead of alert will do what you are trying to achieve. You will have the option to redirect conditionally or unconditionally
function reg(){
var con=confirm("You need to register first before proceeding. Redirect to Registration Page");
if(con==true){
window.location = "reg.aspx";
}
else{
//if redirect unconditionally
window.location = "reg.aspx";
}
}
am working in a popup when we click login a popup opens with fields !!! i want to check username and password with database before login button fired.. used ajax with keyup function for password field!
but keyup is firing for every character typed in password field... but the requirement is after typing password field ajax should be called and result should be displayed... is there any alternative for keyup?
now am getting as "wrong password for every character typed" and after entring correct password it will login,... but i want to show error as wrong password when user completely enters password (if password is wrong)
<script type="text/javascript">
$(document).ready(function() {
$("#upwd").change(function()
//$('#upwd').on('input', function()
//$('#upwd').keyup(_.debounce(doSomething , 500), function() {
var upwd = $("#upwd").val();
var uemail = $("#uemail").val();
var msgbox = $("#status");
//alert(uemail);
//alert(upwd);
//setTimeout(function() {
//if($('#upwd').val() == upwd){
$.ajax({
type: "POST",
url: "checkl_login.php",
data: "uemail="+ uemail,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK') {
msgbox.html(msg);
//return false;
} else {
msgbox.html(msg);
}
});
}
});
return false;
});
});
</script>
error displayed in status id in span......
checkl_login.php code is aalso perfect.....
Try using .focusout() event as shown :-
$("#upwd").on("focusout",function(){
//..your code..
});
and in addition of these events ,use a login button also and check validations on the click of the button.
Use the change event instead of keyup.
IMHO it's better:
to use keyup (it allows to handle any keyboard changes. For example, removing the symbol by backspace)
to handle 'paste' (because user may copy/paste password but not type it)
to validate password if user does not press a key during some period of time (for example, within 1 second) - setTimeout and clearTimeout should help
to abort ajax request if user starts to type when ajax request is in progress
I.e. you may try something like the following:
$(document).ready( function() {
var ajax_h;
var delayMilliseconds = 1000; // i.e. = 1 second
var timeoutId;
function checkAuth() {
if (ajax_h) {
ajax_h.abort();
}
ajax_h = $.ajax(
// PUT YOUR CODE HERE
);
}
$("#upwd").on('keyup paste', function () {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(checkAuth, delayMilliseconds);
});
});