Develop Reference

Changing input method on the fly

I have a simple form on laravel which will take name and email only and submit it to database. Name will be in Japanese. I can validate it in controller.
However, when I am using chrome; after inserting the name in Japanese; I press TAB key and input method automatically changes when cursor is on the email field.
But when I am using edge the input method doesn't change automatically. I have to manually change it.
Is there any way to automatically change input method on the fly regardless of the browser? Is there any JS function and/or Laravel function that I can use?

I solved the problem. The trick is using css.
In the fields I need English input, I put ime-mode inactive and type = tel.
In the fields I need Japanese input, I put ime-mode active.
It worked. my code was something like this.
<input type="text" name="number" placeholder="enter your name" style="ime-mode: active;">
<input type="tel" name="email" placeholder="enter your email" style="ime-mode: inactive;">

using 2 inputs or change type of input to show password

I want to add a show password checkbox to my form.
When a user checks that checkbox password is shown.
Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password". And switch between these inputs according to the status of the checkbox.
it is simpler to change type of input to type="text", so why people use 2 inputs?

Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"
See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history

probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text". it throws an error "Could not get the type property"

I hope ur trying to ask that u want single password input field and show password button...Below is my answer
<input type="password" name="passwd" id="txtPassword" placeholder="Password" required="required">
<input type="checkbox" id="showhide"/>
<label for="showhide" id="showhidelabel">Show Password</label>
<script type="text/javascript">
$(document).ready(function () {
$("#showhide").click(function () {
if ($("#txtPassword").attr("type")=="password") {
$("#txtPassword").attr("type", "text");
}
else{
$("#txtPassword").attr("type", "password");
}
});
});

How to turn on/off a field from parsley.js form validation

When validating an email field [name=bar] in a form #foo, I want to switch validation of that field on and off, in relation to a checkbox.
Reading the docs, github issues and stackoverflow answers, I thought setting data-parsley-required="false" and/or data-parsley-validate="false" would be enough.
But it turns out, that all other constraints, like email, min-lenght, max-length are still validated and the input field still validates to an error condition. I would prefer it to validate to success or not at all.
<form id="foo">
<input name="bar"
maxlength="40"
value=""
class="form-control"
data-parsley-validate="false"
data-parsley-required="false"
type="email"
data-parsley-minlength="5"
data-parsley-trigger="input keyup change"
data-parsley-error-message="something is wrong">
</form>
See https://jsfiddle.net/88obg0sj/9/
So how is it possible to turn off field validation in way, it can be re-activated again?

You should tweak the excluded option, for example by adding ", [data-parsley-validate="false"]" to it.

You can follow this way:-
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?

You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle

Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.

Validate.js - error on regular type="text"

I am having a problem using validate.js
http://docs.jquery.com/Plugins/Validation/validate#toptions
All the inputs work perfect such as <input type="email" class="required" />
my problem is,
I want to show the validation on normal
<input type="text" class="required" /> so if the user selects and leaves the input,
the this field is required is shown.
I have tried both $("#confirm_add").validate(); and
$("#confirm_add").validate({
rules: {
user[first_name]: "required"
}
});
the only way I can achieve this effect is including minlength="2" in the input, but I would prefer not to use that,
any help is well appreciated

As mentioned here, you need to quote field names with brackets in them. If you have this html:
<input type="text" name="user[first_name]" />
You need this in your rules:
...
'user[first_name]': {
required: true
}
...
As to the question of having it immediately show the validation, it just doesn't work that way by default, so you'd have to add code to handle that afterwards, using the valid method:
$('#firstname').blur(function(){
$(this).valid();
});
See it all in action here: http://jsfiddle.net/ryleyb/NVZr8/
Note that if all you are doing is setting required, there's no reason to use the rules object, just set the class="required" in the input.