Валидиране на input и натискане на submit

emptyy

Registered
Здравейте, опитвам се да постигна нещо, но от няколко дни не намирам решение.

Полето <input type="text" name="nickname" ако е свободно да продължи регистрацията, ако е заето името, да не му позволява да натисне бутона value="Регистрация!".

Код:
<script>
	function checkAvailability() {
		$("#loaderIcon").show();
		jQuery.ajax({
			url: "check_availability.php",
			data:'nickname='+$("#nickname").val(),
			type: "POST",
			success:function(data){
				$("#user-availability-status").html(data);
				$("#loaderIcon").hide();
			},
			error:function (){}
		});
	}
</script>

<form method="post" action="">
	<table>
		<tr><td>Никнейм: </td><td><input type="text" name="nickname" id="nickname" onBlur="checkAvailability()" style="width: 200px;" required /> <span id="user-availability-status"></span></td></tr>
		<tr><td>Парола: </td><td><input type="text" id="password1" name="password" style="width: 200px;" required />    <script>$('#password1').passStrengthify();</script></td></tr>
	</table>
	<br /><br />
	<center><input type="submit" name="nickname" value="Регистрация!"/></center>
</form>

check_availability.php
Код:
<?php
if(!empty($_POST["nickname"])) {
	$sql = mysqli_query($conn, "SELECT * FROM user WHERE nickname='".$_POST["nickname"]."'");
	$user_count = mysqli_num_rows($sql);
	
	if($user_count > 0) {
		echo "<span class='status-not-available' style='color:#D60202;'>Този никнейм, вече е регистриран!</span>";
	}else{
		echo "<span class='status-available' style='color:#2FC332;'>Този никнейм, е свободен!</span>";
	}
}
?>
 
С PHP връщаш JSON. Ajax го обработва и връща отговор, като prop взима id на бутона за регистрация и го деактивира. JavaScript-а ти трябва да е в края на документа, или поне след формата. Може да ти се наложи да сложиш и кода в
Код:
$(document).ready(function () { \\ Тук});
Код:
<?php
if(!empty($_POST["nickname"])) {
	$sql = mysqli_query($conn, "SELECT * FROM user WHERE nickname='".$_POST["nickname"]."'");
	$user_count = mysqli_num_rows($sql);
	
	if($user_count > 0) {
		$returnArray = [
			'status' => 1,
			'data' => "<span class='status-not-available' style='color:#D60202;'>Този никнейм, вече е регистриран!</span>",
		];
		echo json_encode($returnArray);
	}else{
		$returnArray = [
			'status' => 0,
			'data' => "<span class='status-available' style='color:#2FC332;'>Този никнейм, е свободен!</span>",
		];
		echo json_encode($returnArray);
	}
}
?>
<form method="post" action="">
	<table>
		<tr>
			<td>Никнейм: </td>
			<td>
				<input type="text" name="nickname" id="nickname" onBlur="checkAvailability()" style="width: 200px;" required /> 
				<span id="user-availability-status"></span>
			</td>
		</tr>
		<tr>
			<td>Парола: </td>
			<td>
				<input type="text" id="password1" name="password" style="width: 200px;" required />    
				<script>$('#password1').passStrengthify();</script>
			</td>
		</tr>
	</table>
	<br /><br />
	<center><input type="submit" id='register' name="nickname" value="Регистрация!"/></center>
</form>

<script>
	function checkAvailability() {
		$("#loaderIcon").show();
		jQuery.ajax({
			url: "check_availability.php",
			data:'nickname='+$("#nickname").val(),
			type: "POST",
			success:function(data){
				$("#user-availability-status").html(data);
				var json = $.parseJSON(data);
				if (json.status > 0) {
					$('#register').prop("disabled", true);
				} else {
					$('#register').prop("disabled", false);
				}
				$("#user-availability-status").html(json.data);
				$("#loaderIcon").hide();
			},
			error:function (){}
		});
	}
</script>
 
Сега започвам да се уча със java-script и не разбрах това
Код:
$(document).ready(function () { \\ Тук});

Но и без него всичко е точно +1
 
emptyy каза:
Сега започвам да се уча със java-script и не разбрах това
Код:
$(document).ready(function () { \\ Тук});

Но и без него всичко е точно +1

https://stackoverflow.com/questions/30753333/why-document-ready-is-used-in-jquery
 

Горе