JQuery can not get the right value by val() function - javascript

I have a form like this
$('#email').on('keyup', function() {
console.clear();
console.log($('#email').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="email" name="email" class="form-control" placeholder="Email" required id="email">
and I want to get the value of Email input, so I use this $("#email").val() .
But I find this just working in English not in Chinese.
If I input "33333#去.com" in to the email input, the code will give this value:"33333#xn--1nr.com".
I can not get the point to fix it.This is not utf-8 of unicode.I even not see any of this before.

This shouldn't matter.
xn--1nr.com is the IDNA Punycode encoding for 去.com – after all, if you send mail to 33333#去.com, you will actually end up sending mail to 33333#xn--1nr.com.
The browser is trying to be clever for you by normalizing the value to Punycode since the field is an email field.

Related

How to turn off autosaving password popup in each browser using Vuejs

Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.

Adding Default Value To Text Input Angular 2

Background
I have a form with an input field containing the user's email address. I am using interpolation to add the email to the placeholder field.
Problem
I do not want the user to be able to change the email address in this field. I only want them to be able to see it. But I do want it to post with the form.
Question
I keep trying different ways and no matter what the form does not post the email. How can I bind it so that it will actually post the email address when the form is submitted?
Examples
I tried with readonly. That way they would not be able to change it.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>
I tried without readonly just to see if it would work if I do not add any restriction flags.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">
I know the email is accessible because I am adding it to the placeholder field and it shows up in the form. It just wont post.
The default value will be the value assigned to personal.email.
Alternatively you can bind to a different property
[(ngModel)]="personalEmail"
and assign a default value to personalEmail and on submit update persona.email in code or use
[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"
to get the initial value from personalEmail and update personal.email when changes happen
This might also work (not tried)
[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"
to only get 'defaultValue' assigned if personal.email is null
Here model is personal.email and the default value is auth.user.email
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">

Check $_POST data with jquery before submitting the form

I have a form that sends the store the First Name of the user in a database. I was checking the information send by the user using regex in php.
To make my project more interactive, I decided to validate the information jQuery before sending it to PHP.
My Project looks like this:
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<body>
<form >
<div>
<label>First Name</label>
<input name="firstname" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$("form").submit(function (e) {
var firstname = $(this).find('input[name="firstname"]').val();
var regex = /^[A-Za-z0-9 \-']+$/;//Only numbers, Letters, dashes, apostrophes and spaces are accepted
if(regex.test(firstname)){
alert('Valid Name.');
}else{
alert('Invalid Name.');
e.PreventDefault();
}
});
});
</script>
Now I have 2 questions:
Is it really need to check the First Name in PHP again before storing the data in the database ? (To improve security)
How can I submit the form right after the alert('Valid Name.'); ?
Thanks for providing your help.
First of all have in mind that the validation of users input is implementing at the server side of an application only!!! You can not validate input data at client side with JS because it can be passed very easy(either by disabling javascript or by using tools like Curl).
However you can increase user experience like validate an input before submitting the form or inform the user that forgot to fill in an input.
To inform the user about a not fill in input you can just use the new html 5 attribute required like above
Username: <input type="text" name="usrname" required>
the required attribute will not let the user submit the form unless he had filled the associated input.
Also you can use the maxlength attribute to address a use case like "A password must have X max letters.
Password: <input type="password" name="pass" maxlength="8" size="8"><br>
How to validate input at server side
There are many techniques for this and you can find all of them here at Stackoverflow. Ι will refer the top voted post How can I prevent SQL injection in PHP? which answer exactly your question.
Just two bullets that compact the above post that i suggest you read otherwise
Always escape your data
Use mysqli instead of mysql
How can I submit the form right after the alert('Valid Name.'); ?
this is very easy just use this code
<form action="action_page.php" method="post">
<div>
<label>First Name</label>
<input name="firstname" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
the above code will "send" user's input for process at action_page.php using POST method, where you can read using $_POST supergloba table like $firstname = $_POST['fistsname'] etc.
TRY This
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js" ></script>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<body>
<form >
<div>
<label>First Name</label>
<input name="firstname" id="first_name" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
<script>
jQuery.validator.addMethod("firstName",function(value,element,param)
{
if(this.optional(element))
{//This is not a 'required' element and the input is empty
return true;
}
if(/^[A-Za-z0-9 \-']+$/.test(value))
{
return true;
}
return false;
},"Please enter a valid First Name");
$(function()
{
$('#myform').validate(
{
rules:
{
first_name:{ required:true, firstName:true }
}
});
});
</script>
Firstly you should ALWAYS validate server side for form submission, especially if you are passing those value along to a DB - SQL injection, the struggle is real.
As for the form submission flow you can...
return true
... after the valid name alert and the form to submit as it normally would.
Since you already have bound to that submit event, It would be even better for the user if you submitted the form via ajax, and providing feedback if the server validation fails. Thus the user never leaves the page and you are able to handle both client and server validation.
Take a look at ParsleyJS - http://parsleyjs.org/ - w00t!

HTML5 form validation for email [duplicate]

This question already has answers here:
HTML5 Email input pattern attribute
(20 answers)
Closed 7 years ago.
I am stuck with this issue to which I did not pay attention to before.
<label> Email Address </label>
<input type="email" id="emailAddress" required placeholder='Email Address' />
<button type="submit" class="button primary small">Submit</button>
In my JS file I am checking for its validation using checkValidity()
checkValidEmail: function(event){
var emailAddress = $('#emailAddress');
if(emailAddress[0].checkValidity()){
console.log('Valid');
} else{
console.log('Not Valid');
}
}
"keyup #emailAddress": "checkValidEmail" // KeyUp works as expected
Output:
'a#b' // Valid
I do not understand this behavior. As per my knowledge #.com was the regex for input email.
Please note: I tried this on multiple sites with forms and it shows the same input. In the above case I am executing this on the chrome browser.
Thanks for taking time to reply!
If you want to use regular expression validation, read on
http://www.regular-expressions.info/email.html
Be aware that below is 100% valid and working email address :-) Use it often for testing incorrectly implemented email validation
xn--80a1acny#xn--80auew.xn--j1amh
Another option is to check if email address domain name is valid. Do do that you can query DNS server for MX record (this one points to SMTP server responsible for receiving incoming mail). You will need server side code to do that.
in HTML5 you can validate email like this
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

Change post form

I have simple login form in my website. In given requirements stands, that password mustn't been sent to server, but only MD5 hash. I took simple MD5 function and now, when with onClick on submit button I change hidden text from password to md5(password). This works fine, but user sees, that something with his password is happening. I would like to make it transparent and change this particular part of form dynamically with onPost (or smth like this) callback.
I can't find any tutorials how to deal with manipulating POST table/form in javascript (jquery?) so if anyone could help I would appreciate.
As far as I know input fields that don't have name don't get submitted to the server. So you could have a hidden field and in the onsubmit event of the form copy the value of the password field into the hidden field by applying the MD5 checksum:
<form method="post" action="/login">
<input type="password" id="password" />
<input type="hidden" name="password" id="hiddenpassword" />
<input type="submit" value="Login" />
</form>
and then:
$('form').submit(function() {
var password = $('#password').val();
var md5 = MD5(password);
$('#hiddenpassword').val(md5);
return true;
});

Categories