Develop Reference

disable and enabling a html button

Users will only be able to click the submit button if users select a video file and the textbox is not empty. i can disable the submit button but i cant re-enable it
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" />
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById('submit').disabled = false;
}
</script>

Your code had a lot of mistakes. This is your corrected code:
function check() {
if (document.querySelector('#videofile').files.length != 0 && (document.getElementById("videoTitle").value.length > 1)) {
document.getElementById('Submit').disabled = false;
} else {
document.getElementById('Submit').disabled = true;
}
}
Here is the JSFiddle demo
Missing ID added (u added only name attribute, and forgot the ID while still trying to use them)
Changed 'submit' in code to 'Submit'
Remove JQuery $ syntax
Validation on keypress rather than on submit click (which doesn't makes sense since u cant click the button while its disabled)
Else code added to re-disable the button if conditions are not valid

onclick event over submit button does not make sense here. You must listen change event of the file input and keyup event of the text input and apply conditions accordingly. You have not assigned id attribute as well(videoTitle)
Also note that click handler will not be invoked if the button is disabled
Try this:
var submitBtn = document.getElementById('Submit');
function enableDisable() {
var elem = document.getElementById('videofile');
var n = document.getElementById('videoTitle').value;
if (elem.files.length && n) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
}
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" onchange='enableDisable()' />
<br/> Please enter video title:
<br/>
<input type="text" name="videoTitle" id='videoTitle' onkeyup='enableDisable()' />
<br />
<input type="button" disabled id="Submit" value="Submit" />
</form>

Can you try to make your submit function do something?
function submit() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
}
};

you should use change event for text and videofile elements. So that whenever you modify something, change event is triggered and ur condition is checked inside it. Submit button is enable according to it.
Se the below code for reference!
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" id="videoText"/>
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
$('#videofile').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
$('#videoText').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
</script>

I feel this is a bit simpler way to achieve this
<script>
document.getElementById("submit").style.pointerEvents = "none"; //Disable
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById("submit").style.pointerEvents = "all"; //Enable
}
</script>
Just replace your script with this one & try..
Hope this works for you..

Javascript compare two var against known values not working?

I am trying to do a simple "login" to display a hidden div of a website by having a user input two var (userName and password) and comparing both to declared values.
<script>
function validate() {
var x = document.getElementById("userName").value
var y = document.getElementById("password").value
if (x == "Chris569x") && (y == "DM1986!"){
//Show div
}
else {
window.alert("Incorrect user name/password");
}
}
</script>
<p>DM Login
<br>
<form onSubmit="validate()">
<p>User Name:
<input type="text" id="userName">
<br>
<p>Password:
<input id="password" type="password">
<br></p>
<input name="Login" type="submit" id="Login" title="Login" value="Login" >
</form>
</div>

Your if statement
if (x == "Chris569x") && (y == "DM1986!"){
//Show div
}
Should be
if (x === "Chris569x" && y === "DM1986!"){
//Show div
}
And remember to use tripe equals instead of double.

Jquery/Form - check input field is at least 5 characters long - and also doesn't match certain words

I have a very simple form. Full Name/Email. What I want to do is check with jquery to make sure that they entered AT LEAST 5 characters in the name field. And if they did not, then I don't want the form to be submitted, instead I want to print some HTML below the form showing a warning/error message. How can I accomplish this?
Also Can I add words manually to the script to make sure they were not entered in the name field? And if they were to make sure it prints errors again... For example, if they entered the word "bobby" or "stephanie" I don't want the form to be submitted if those EXACT words are entered. It is only like 5 or 6 words I want blocked, so I can enter them manually no problem in the script without bloating anything.
Thank you so much in advance.
Here is my HTML
<div id="div1">
<label id="name-label" for="full_name">Name</label>
<input id="full_name" type="text" name="name" tabindex="1" autofocus="1">
</div>
<div id="div2">
<label id="email-label" for="email_address">Email</label>
<input id="email_address" type="email" tabindex="2" name="email">
</div>
And this is the added HTML I want printed if the jquery check is false
<div id="error">
<span class="error_message">Please enter your full name</span>
</div>

Let's assume your form has an id of myForm.
var words = ["bobby", "stephanie"];
jQuery('#myForm').on('submit', function(evt) {
var form = $(this);
var full_name = form.find('#full_name');
var name_length = full_name.val().length;
if( name_length < 5 ) {
jQuery('#error').show();
evt.preventDefault();
}
if( jQuery.inArray(full_name.val(), words) ) {
evt.preventDefault();
}
});

Here is my answer: there are two if statements that we can construct:
Test if length of input exceeds 5 characters, and
Test if the input matches a list of banned words (stored in an array for convenience and verbosity)
It is a little complicated with the second conditional statement, since we want an exact match (therefore, using 'bobby' will raise a flag, but not 'bobby123'. This involves the use of word boundaries, \b.
You can view the code in action in this fiddle: http://jsfiddle.net/teddyrised/kmMcC/
$('form').submit(function(e) {
var errorFlag = 0,
bannedWords = [
'bobby',
'stephanie'
],
bannedObj = new RegExp('\\b'+bannedWords.join('|')+'\\b', 'i');
if($('#full_name').val().length <= 5) {
errorFlag = 1;
}
if(bannedObj.test($('#full_name').val())) {
errorFlag = 1;
}
// Act on error flag, prevent form submission when one or more error flags are raised
if(errorFlag) e.preventDefault();
});

Assuming you put this all in a form element, and add an input type='submit' element to it, I would suggest setting the form's onsubmit attribute to "return Validate();", and add the below validation function.
First you'll want to hide the message on ready using: $('error').hide();
function Validate(){
var minLength = 5;
var blockedNames = ["bobby","stephanie"];
var fName = $('#full_name').val();
if(fName.length < minLength){
$('#error').show();
$('#full_name').focus();
return false;
}
for(var i = 0;i < blockedNames.length;i++){
if(fName == blockedNames[i]){
$('#error').show();
$('#full_name').focus();
return false;
}
}
return true;
}

JSFIDDLE DEMO: http://jsfiddle.net/softvar/hv6yB/2/
UPDATE:
HTML
<form onsubmit="return check()">
<div id="div1">
<label id="name-label" for="full_name">Name</label>
<input id="full_name" type="text" name="name" tabindex="1" autofocus="1" />
</div>
<div id="div2">
<label id="email-label" for="email_address">Email</label>
<input id="email_address" type="email" tabindex="2" name="email" />
</div>
<input type="submit" value="Submit"/>
</form>
<div id="error" >
<span class="error_message">Please enter your full name</span>
</div>
CSS
#error {
color:red;
display: none;
border: 1px solid #D9534F;
background: #FDF7F7;
width: 80%;
height: 25px;
padding: 5px;
}
JS
function check() {
var bannedWords = ['bobby','stephen'];
var name= $('#full_name').val();
if(name){
if(name.length>5){
for(var i=0;i<bannedWords.length;i++) {
if(bannedWords[i] ==name){
$('#error').text('Its a banned word');
$('#error').css('display','inline-block');
return false;
}
}
alert('form is going to be submitted');
return true;
}
else{
$('#error').text('Name is shorter');
$('#error').css('display','inline-block');
return false;
}
}
$('#error').text('Name cant be blank');
$('#error').css('display','inline-block');
return false;
}

HTML Forum validation via JS returning php value

Hopefully this wont be quite as simple as I have been thinking it should have been. A simple HTML forum when submit is clicked calls a Javascript for validation to be handled by PHP to put the information that has been validated into a MySql table. The issue I am having is once i get the javascript return true, how do I pull this out to use in PHP?
The Forum:
<form action="" method="post" name="register">
<div class="field">
<label for "username">Username</label>
<input type="text" name="username" id="username" value="" autocomplete="off">
</div>
<div class="field">
<label for "password">Choose a password</label>
<input type="password" name="password" id="password">
</div>
<div class="field">
<label for "password_again">Reenter Password</label>
<input type="password" name="password_again" id="password_again">
</div>
<div class="field">
<label for "name">Name</label>
<input type="text" name="name" id="name" value="" autocomplete="off">
</div>
<input type="submit" value="Register" id="submit" onclick="validate()" />
The external JS file:
function validate() {
var password = document.register.password.value;
var passwordagain = document.register.password_again.value;
var name = document.register.username.value;
var test = new RegExp("[^a-zA-Z0-9]");
var space = String.fromCharCode(32);
if (name.match(test)) {
alert("Your name may only contain letters and numbers.");
return false;
} else if (name.match(space)) {
alert("Spaces are not allowed.");
return false;
} else if ((name.length <= 2) || (name.length >= 11)) {
alert("Name must be between 3 and 10 characters.");
return false;
} else if (!password.match(passwordagain)) {
alert("Passwords do not match");
return false;
} else if ((password.length <= 6) || (password.length >= 32)) {
alert("Password must be between 6 and 32 characters long.");
return false;
}
return true;
}

You can set the form's action attribute to point to a PHP page to be redirected to after the form has been validated.
Alternatively, you can use an XMLHttpRequest to send the form data to a PHP script. There was already a question asked on how to do this which you can find here.
Side Note:
It is usually a good idea to do all form validation server-side. This is because it is very easy for someone to hack JavaScript. Anyone could change your validate() function by opening up their browser's console and doing something like this:
validate = function() { return true; };

I cant enable the button again in javascript

I am trying to control the password input. And when it is less than 6 characters , I dissable tthe button and dispay an error mesage...But my problem is that when the password is greater than 6 characters the mesage appears again and the button is still disablet...What can I do?
the function is below..Please help me
function passcheck() {
var pass = document.getElementById('password1');
var sb = document.getElementById('submit');
if (pass.value.length < 6) {
document.getElementById('error').style.display = 'block';
sb.disabled = true;
} else {
document.getElementById('error').style.display = 'none';
sb.disabled = false;
}
}
HTML:
<input type="password" name="password1" id="password1" class="textinput" style="margin-left: 15%;margin-top: -2.5%;width: 30%" onchange="passcheck()">
<br>
<input type="button" value="Submit" id="submit" onclick="location.href='userlogin.html'" class="button" style=" margin-top: 4%;width: 15%" >
<br>

Disabled is a property, not an attribute.
Use:
.removeAttribute("disabled");

Use onkeyup instead of onchange for calling passcheck().